JavaScript之动态表格渲染和删除表格数据

2022-08-07 18:30:24 阅读：836 来源： 互联网

标签：appendChild vewData 表格渲染 JavaScript tr let td document

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="/js/layui.js"></script> -->
    <link rel="stylesheet" href="/js/NES.css">
    <style>

    </style>

</head>

<body>
    <div class="nes-table-responsive">
        <table class="nes-table is-bordered is-centered">
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>性别</td>
                    <td>删除</td>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</body>
</html>
<script>
let vewData=[
    {
        name:'张三',
        age:'18',
        gender:'男'
    }, {
        name:'武器大师',
        age:'46',
        gender:'男'
    }, {
        name:'不详之刃',
        age:'19',
        gender:'女'
    }, {
        name:'瑞萌萌',
        age:'20',
        gender:'女'
    }
];
//获取tbody的DOM对象
let tdby=document.querySelector('tbody');
//根据数组长度循环创建tr
for (let i = 0; i < vewData.length; i++) {
    let tr=document.createElement('tr');
//根据数组对象中的数据循环创建td并赋值
    for (const key in vewData[i]) {
      let td=  document.createElement('td');
      td.innerHTML=vewData[i][key];
        tr.appendChild(td);
    }
//最后创建删除按钮并追加
    let detr=document.createElement('td');
    let btn=document.createElement('button');
    btn.innerHTML='删除';
    detr.appendChild(btn);
    tr.appendChild(detr);
    tdby.appendChild(tr);
}
//获取tbody中的所有按钮DOM对象
let btns=tdby.querySelectorAll('button');
//循环绑定点击事件
for (let i = 0; i < btns.length; i++) {
    btns[i].onclick=function()
    {
       //获取当前按钮的父级的父级DOM也就是tr
       let tr= this.parentNode.parentNode;
//再获取tr的父级
       let tbodys=td.parentNode;
       //删除对应的tr
       tbodys.removeChild(tr);
    }
    
}

</script>

标签：appendChild,vewData,表格,渲染,JavaScript,tr,let,td,document
来源： https://www.cnblogs.com/xiangshifu/p/16559590.html

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

ICode9

JavaScript之动态表格渲染和删除表格数据