js 动态生成table

前几天一朋友问我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>

效果图：