在js代码拼接dom对象到页面上的模板总结
2018-10-21 16:14
711 查看
每次在js代码里面想动态的拼个dom,然后append到页面上,都是各种麻烦,
要是可以直接在jsp页面弄个隐藏的model那是很好的,用js方法里面的clone方法也是很好的,还可以给不同部分set值。
为了以后简单点,我就把模板摆着,方便后面用得着的时候,复制粘贴。
function fillDialog(dataArray) { var target = $("#dialogTarget"); target.empty(); for (var i = 0; i < dataArray.length; i++) { var label = $('<label class="control-label" style="width: auto; text-align: left;"></label>'); label.text("" + dataArray[i].channelName); var input = $("<input type=\"text\"/>"); input.prop("name", "checkbox"); input.prop("type", "checkbox"); input.prop("value", dataArray[i].id); if (dataArray[i].showInUserStatistic) { input.prop("checked", "true"); } label.prepend(input); target.append(label); } }
var trs = ""; for (var i = 0; i < dataArray.length; i++) { var branchBank = dataArray[i].branch; var newUser = dataArray[i].newUserNum; var netBoostUser = dataArray[i].netBoostUserNum; var closeUser = dataArray[i].closeUserNum; var activeUser = dataArray[i].activeUserNum; var index = activeUser.indexOf("."); if (index > 0) { //去分行活跃用户数的小数部分如:11.0 ---> 11 activeUser = activeUser.substring(0, index); } trs += "<tr><td title='" + branchBank + "'>" + branchBank + "</td>"; trs += "<td title='" + newUser + "'>" + newUser + "</td>"; trs += "<td title='" + netBoostUser + "'>" + netBoostUser + "</td>"; trs += "<td title='" + closeUser + "'>" + closeUser + "</td>"; trs += "<td title='" + activeUser + "'>" + activeUser + "</td>"; trs += "</tr>"; } newList.append("<tbody>" + trs + "</tbody>"); tableChart.append(newList.show());
var $metric = $("#metric"); $metric.empty(); var optGroup0 = $("<optgroup label='常用指标'>"); var optGroup1 = $("<optgroup label='不常用指标'>"); var optGroup2 = $("<optgroup label='未分组指标'>"); for(var i=0; i<allMetricSources.length; i++) { var m = allMetricSources[i]; if( m != null && (m.type == stream_type || m.type == 2)){ var option = $("<option ></option>"); option.attr("value", m.metric); option.attr("data_type", m.data_type); option.attr("unit", m.unit); option.html(m.title); if (m.groupType == 0) { optGroup0.append(option); } else if (m.groupType == 1) { optGroup1.append(option); } else { optGroup2.append(option); } } } $metric.append(optGroup0); $metric.append(optGroup1); $metric.append(optGroup2); if(metric != undefined){ $metric.val(metric); } $metric.trigger("chosen:updated");
function fillRecoveryTable(data) { var $tableBody = $("#recoveryTable").find("tbody"); $tableBody.empty(); var trs = ""; for (var i = 0; i < data.length; i++) { var recovery = data[i]; trs += "<tr><td >" + recovery.fileName + "</td>"; trs += "<td >" + recovery.timeString + "</td>"; trs += "<td >" + (recovery.result ? "成功" : "失败") + "</td>"; trs += "<td >" + "<a onclick=\"removeRecovery('" + recovery.id + "');\" class=\"icon-trash option\" title=\"删除\"></a>" + "<a onclick=\"doRecovery('" + recovery.id + "');\" class=\"icon-cog option\" title=\"一键恢复\" ></a></td>"; trs += "</tr>"; } $tableBody.append(trs); }
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接
您可能感兴趣的文章:
- 原生JS实现DOM加载完成马上执行JS代码的方法
- JS中DOM元素的attribute与property属性示例详解
- JavaScript实现的DOM绘制柱状图效果示例
- JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
- JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
- JavaScript DOM元素常见操作详解【添加、删除、修改等】
- JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
- 学习JS中的DOM节点以及操作
- JS中获取 DOM 元素的绝对位置实例详解
- JS实现DOM删除节点操作示例
- JS实现的DOM插入节点操作示例
- JS遍历DOM文档树的方法实例详解
- js中DOM事件绑定分析
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- js 格式化日期函数
- 5个常见可用性错误和解决方案
- js实现同一个页面,多个enter事件绑定的示例
- web页面和微信小程序页面实现瀑布流效果
- js正则取值的结果数组调试方法
- js限制输入框只能输入数字(onkeyup触发)
- 在centOs 上搭建nginx来部署静态页面网站
- 用户自定义多选框checkbox
- javascript中Array类型常用方法
- js事件on动态绑定数据,绑定多个事件的方法
- 原生JS实现自定义下拉单选选择框功能
- 解决vue页面DOM操作不生效的问题
- 基于vue1和vue2获取dom元素的方法
- JS实现将链接生成二维码并转为图片的方法
- JS实现为动态创建的元素添加事件操作示例
- js中DOM事件绑定分析