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

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