js循环添加table数据

2022-06-13 10:33:38 阅读：127 来源： 互联网

标签：标签 tr js 添加 trval var table td sex

<body>
    <table border="1">
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        </thead>
        <tbody id="test">
        </tbody>
    </table>
    <script type="application/javascript">
        var list=[{id:1,name:"zhangsna",sex:"0"},{id:2,name:"lisi",sex:"0"}];
        for(var datalist in list){
            //每次循环创建一个tr，实现换行
            var trval = document.createElement("tr")
            //获取字典中的数组
            var data = list[datalist];
            for(var info in data){
                //创建td标签
                var tdval = document.createElement("td")
                //获取每次循环的值[id，name，sex]]
                var text = data[info]
                //将获取的值绑定到td标签上
                tdval.innerText = text
                //将td标签绑定到tr上
                trval.appendChild(tdval)
            }
            var bodyTag = document.getElementById("test")
            //将tr标签绑定到tbody上
            bodyTag.appendChild(trval)
        }
    </script>
</body>

标签：标签,tr,js,添加,trval,var,table,td,sex
来源： https://www.cnblogs.com/whtjyt/p/16369911.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js循环添加table数据