前几天一朋友问我js怎么控制页面动态生成表格,我整理了一下代码:
js代码:
<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;
for (var i = 0; i < data.length; i++) {
var tr = document.createElement("tr");
tr.innerHTML = '<td class="active">' + data[i].name + '</td><td class="warning" onClick=clickPerson('+data[i].id+') >编辑</td>';
tdArr.appendChild(tr)
}
};
function clickPerson(id) {
console.log(id)
}
</script>
html代码:
<table class="table table-hover" id="tablebox">
<tr>
<td class="active">用户名</td>
<td class="warning">编辑</td>
</tr>
</table>
效果图: