js动态生成表格
2022-03-31 本文已影响0人
媛猿YY
<html>
<body>
<table class="table table-hover" id="tablebox">
<tbody>
<tr>
<td class="active">用户名</td>
<td class="warning">编辑</td>
</tr>
</tbody>
</table>
</body>
<script language="javascript">
var data = [{
"id": 1,
"name": "张三"
}, {
"id": 14,
"name": "张三"
}, {
"id": 1,
"name": "张三"
}, {
"id": 1,
"name": "张三"
}];
window.onload = function () {
var tdArr = document.getElementById('tablebox').firstElementChild; //拿到tbody
for (var i = 0; i < data.length; i++) {
var tr = document.createElement("tr"); //创建tr标签
tr.innerHTML = '<td class="active">' + data[i].name + '</td><td class="warning" onClick=clickPerson(' +
data[i].id + ') >编辑</td>';
tdArr.appendChild(tr)
}
console.log('tdArr: ', tdArr);
};
function clickPerson(id) {
console.log(id)
}
</script>
</html>
