js向表格中添加数组中的数据_js td插数据-优快云博客

本文链接：https://blog.youkuaiyun.com/wangzongyang1025_/article/details/89882473

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    table,
    tr,
    td {
        width: 600px;
        height: 100px;
        text-align: center;
        border: 1px solid #ccc;
        border-collapse: collapse
    }
</style>

<body>
    <table>
        <tr class="tr">

        </tr>
    </table>
    <script>
        var arr = ['编程', '体育', '职业素养', '英语', '思想政治', '形体', '班会']
        // 获取tr元素标签
         var tr = document.querySelector('tr')
         console.log(tr)   
         for(var i = 0,len = arr.length;i<len;i++){
             console.log(arr[i]);
             tr.innerHTML += '<td>' + arr[i] + '</td>'
         }
 
    </script>
</body>

</html>

也可以以appendChild元素添加：

        var arr = ['编程', '体育', '职业素养', '英语', '思想政治', '形体', '班会']
        for (var i = 0, len = arr.length; i < len; i++) {
            var tr = document.querySelector('tr')
            var td = document.createElement('td')
            var text = document.createTextNode(arr[i])
            td.appendChild(text)
            tr.appendChild(td)
        }