根据数据创建好表格并加删除功能

最终效果入下：

创建表格并加删除功能

指定的结构如下：

<table border=1 width="500">
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>成名绝技</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

指定的数据如下：

var arr = [
    {
        name:"令狐冲",
        age:20,
        sex:"男",
        skill:"独孤九剑"
    },
    {
        name:"东方不败",
        age:50,
        sex:"女",
        skill:"葵花宝典"
    },
    {
        name:"任我行",
        age:55,
        sex:"男",
        skill:"吸星大法"
    }
];

根据数据加载页面的函数如下：

// 根据数据加载页面
loadHTML()
// 根据数据加载页面的函数
function loadHTML(){
    // 根据结果分析，最终需要3个tr，因为数组中有3个元素，所以遍历数组来创建tr
    // 定义最终存放所有内容字符串的变量
    var html = '';
    // 遍历数组
    for(var i=0;i<arr.length;i++){
        // 拼接tr开头 - 最终会拼接3次
        html += '<tr>'
            // 每个tr中拼接第一个td
            html += '<td>'
                // td中拼接内容
                html += i+1 // 序号是 下标+1
            html += '</td>'
            // 每个tr中拼接第二个td
            html += '<td>'
                html += arr[i].name // 姓名是当前遍历的 对象.name
            html += '</td>'
            // 每个tr中拼接第三个td
            html += '<td>'
                html += arr[i].age // 年龄是当前遍历的 对象.age
            html += '</td>'
            // 每个tr中拼接第四个td
            html += '<td>'
                html += arr[i].sex // 性别是当前遍历的 对象.sex
            html += '</td>'
            // 每个tr中拼接第五个td
            html += '<td>'
                html += arr[i].skill // 成名绝技是当前遍历的 对象.skill
            html += '</td>'
            // 每个tr中拼接第6个td - 删除
            html += "<td>删除</td>"
        // 拼接tr结尾，最终会拼接3次
        html += '</tr>'
    }
    // 将拼接好的所有内容放到tobody中
    document.querySelector('tbody').innerHTML = html
}

获取所有的删除td，并绑定事件删除当前这一行：

// 获取所有删除td，并绑定事件
delTr()
function delTr(){
    // 获取所有的删除td
    var delTd = document.querySelectorAll('td:last-child')
    // 通过循环给所有删除td绑定单击事件
    for(var i=0;i<delTd.length;i++){
        // 给每个td添加属性，值为这个td的下标
        delTd[i].index = i
        delTd[i].onclick = function(){
            // 从当前标签的属性中获取到当前标签的下标
            var index = this.index
            // 根据这个下标删除数组
            arr.splice(index,1)
            // 重新加载页面 - 将上面根据数组加载页面的代码封装为一个函数重复调用
            loadHTML()
            // 重新获取所有的新的删除td，并绑定事件
            delTr()
        }
    }
}