在js代码拼接dom对象到页面上的模板总结

每次在js代码里面想动态的拼个dom，然后append到页面上，都是各种麻烦，
要是可以直接在jsp页面弄个隐藏的model那是很好的，用js方法里面的clone方法也是很好的，还可以给不同部分set值。
为了以后简单点，我就把模板摆着，方便后面用得着的时候，复制粘贴。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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);   } }<br>

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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());<br>

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

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");<br>

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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); }

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对主机吧的支持。