美文网首页
js动态生成表格

js动态生成表格

作者: 媛猿YY | 来源:发表于2022-03-31 16:48 被阅读0次
<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>

相关文章

网友评论

      本文标题:js动态生成表格

      本文链接:https://www.haomeiwen.com/subject/ykenjrtx.html