js动态追加到html table中,js动态拼接table及遍历回填数据

实际开发中经常会用到数据回填，常规append()方法要求html必须在同一行，否则就会报错，这里就用到了html节点拼接，注：如果给拼接的元素加点击事件，必须将事件方法写在append()之后，不然方法不生效

function AppendHtmlNew(index, data) {

var data = [{ SystemName: "1", BusinessName: "1", ServiceCount: "1", ServiceName: "1", TableType: 2 },

{ SystemName: "2", BusinessName: "2", ServiceCount: "2", ServiceName: "2", TableType: 2 },

{ SystemName: "3", BusinessName: "3", ServiceCount: "33", ServiceName: "3", TableType: 2 }]

//此处为演示数据

if (checked) {

indexshowhide = 1

var html = "",

html = '

'

$('#collapseTmp').append(html);//这里为表格容器

$.each(data, function (index2, item) {

if (data.IndexAttribute == 2) {

//符合条件执行

$("#big_div").append("

" + (item.SystemName == null ? "" : item.SystemName) + "" + (item.BusinessName == null ? "" : item.BusinessName) + "" + (item.ServiceCount == null ? "" : item.ServiceCount) + "" + (item.ServiceName == null ? "" : item.ServiceName) + "")

}

})

}