table表格，增加删除

思路：

      1,定义全局作用域变
        2,调用生成table表格函数,生成页面
        3,给新增button按钮,添加事件
             调用生成table表格的函数

        4,定义生成table表格函数函数
               将字符串写入到tbody标签中
            调用 给 删除标签,添加事件函数
            说明:因为我们给删除标签添加事件,必须要和渲染生成页面一起执行
                 每次渲染生成页面,都要给button标签,添加删除事件,因此,这两个操作,必须要绑定执行
                 把这两个操作,都写在渲染生成页面的函数中

        5,定义函数,给button标签,添加删除效果 l函数
              再次调用生成table表格函数

代码：

姓名：<input type="text"><br>
年龄：<input type="number"><br>
性别：男<input type="radio" value="男" name="sex">
女<input type="radio" value="女" name="sex">
城市：<select>
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="重庆">重庆</option>
    <option value="天津">天津</option>
    <option value="武汉">武汉</option>
    <option value="广州">广州</option>
</select>
<button name="add">新增</button>



<table>
    <thead>
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>城市</td>
            <td> </td>
        </tr>

    </thead>
    <tbody>

    </tbody>
</table>
<script>
    var arr = [{
            name: '张一',
            age: 18,
            sex: '男',
            city: '北京'
        },
        {
            name: '张二',
            age: 18,
            sex: '男',
            city: '北京'
        },
        {
            name: '张三',
            age: 18,
            sex: '男',
            city: '北京'
        },
        {
            name: '张四',
            age: 18,
            sex: '男',
            city: '北京'
        },
        {
            name: '张五',
            age: 18,
            sex: '男',
            city: '北京'
        },
        {
            name: '张六',
            age: 18,
            sex: '男',
            city: '北京'
        },
        {
            name: '张七',
            age: 18,
            sex: '男',
            city: '北京'
        },
        {
            name: '张八',
            age: 18,
            sex: '男',
            city: '北京'
        },
    ];
    var oTb = document.querySelector('tbody');
    // var oBtn = document.querySelector('button');
    oTb.innerHTML = setTab();
    del();
    var oBtn = document.querySelector('[name="add"]')


    setTab();

    oBtn.onclick = function () {
        //   获取姓名的数据
        var oIptName = document.querySelector('[type="text"]').value;
        //   获取年龄数据
        var oIptAge = document.querySelector('[type="number"]').value;
        //   获取性别数据
        var oIptSex = document.querySelectorAll('[type="radio"]');

        var oIptSexVal = 0;
        oIptSex.forEach(function (item) {
            if (item.checked === true) {
                oIptSexVal = item.value;
            }
        })
        //   获取城市标签
        var oIptCity = document.querySelector('select').value;
        var obj = {
            name: oIptName,
            age: oIptAge,
            sex: oIptSexVal,
            city: oIptCity
        };
        arr.push(obj);
        oTb.innerHTML = setTab();

        setTab();
    }

//增加
function setTab() {
var str = ’ ';
arr.forEach(function (item, key) {
str += ‘’;
str += <td>${key+1}</td>;
for (var k in item) {
str += <td>${item[k]}</td>;
}

            str += `<td> <button name="del"    index="${key}">删除</button> </td>`;
            str += '</tr>';
        });

        // return str;
        oTb.innerHTML = str;
        del();
        // oTb.innerHTML =del();

    }

//删除
function del() {
var oBtns = document.querySelectorAll(‘tbody button’);
oBtns.forEach(function (item) {
item.onclick = function () {
var index = item.getAttribute(‘index’);
arr.splice(index, 1);
oTb.innerHTML = setTab();
setTab();
}
});
}