Dom——生成表格

生成表格

效果

如上图所示，生成表格，点击删除可删除那行

核心思想

1. 数据是动态的，在正式项目中是使用数据库来实现的，这次利用js的对象储存数据来实现
2. 往tbody里插入数据，行的个数为数组的长度；行里面用createElement创建单元格td，再用appendChild添加td，td的个数取决于数组元素个数
3. tr和td均用循环创建，外层tr用for循环，内层td可使用for…in…来实现（因为tr是一个对象）
4. 把值赋给td（在for(var k in obj)中k得到属性名；obj[k]得到属性值
5. 用createChild创建超链接a“删除”单元格，添加到tr最后一个，用for获取全部的a，当a被点击，则用removeChild删除该行（a为td内的内容，行tr则是td的父级，因此要用a.parentNode.parentNode）

代码

html部分

    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>