Js操作表格

要求：点击按钮实现表格内容与输入框交互

<div>
    <span>请输入姓名：</span>
    <input type="text" value="小黑" id='name'>
</div>
<div>
    <span>请输入邮箱：</span>
    <input type="text" value="xiaohei@126.com" id='email'>
</div>
<div>
    <button id='add'>添加</button>
    <button id='remove'>删除</button>
    <button id='firstrow'>第一行</button>
    <button id='before'>上一行</button>
    <button id='after'>下一行</button>
    <button id='lastrow'>最后一行</button>
</div>
<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>邮箱</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小白</td>
            <td>xiaohei@128.com</td>
        </tr>
    </tbody>
</table>

div span {
    font-size: 20px;
    font-weight: 800;
}

div:nth-child(3) {
    margin: 20px 0;
}

table {
    border-collapse: collapse;
    text-align: center;
    margin: 10px 0;
}

input {
    border: none;
    border-bottom: 1px solid #000;
}

thead tr>*,
tbody tr>* {
    border: 1px solid #000;
}

thead {
    background-color: blue;
    color: red;
}

thead tr th {
    width: 10em;
}

thead tr th:nth-child(2) {
    width: 500px;
}

tbody tr {
    background-color: rgb(255, 166, 0);
}

// 获取表格元素
var table = document.querySelector('table');
// 获取tbody元素
var tbody = table.querySelector('tbody');
// 获取所有button元素
var button = document.querySelectorAll('button');
// 获取所有input元素
var ipt = document.querySelectorAll('input');
// 存储当前选中的行
var row = tbody.querySelector('tr');
// 遍历按钮
for (var i = 0; i < button.length; i++) {
    // 绑定按钮点击事件
    button[i].onclick = function () {
        // 当按钮的id为add时，执行表格添加行操作
        if (this.id == 'add') {
            // 创建行tr
            var tr = document.createElement('tr');
            // 添加到tbody的最后
            tbody.appendChild(tr);
            for (var j = 0; j < table.rows[0].cells.length; j++) {
                // 创建列td
                var td = document.createElement('td');
                // 列的html修改为 
                td.innerHTML = ipt[j].value;
                // 添加列到tr
                tr.appendChild(td);
            }
            // 当前选中的行为：最后创建的一行
            row = table.rows[table.rows.length - 1];
        }
        // 当按钮的id为remove时，执行表格删除行操作
        if (this.id == 'remove') {
            // 删除最后一行
            tbody.removeChild(tbody.children[tbody.children.length - 1]);
            // 当前选中的行为：当前表格中的最后一行
            row = table.rows[table.rows.length - 1];
            // 赋值给输入框
            for (var i = 0; i < table.rows[0].cells.length; i++) {
                ipt[i].value = row.children[i].innerText;
            }
        }
        // 当按钮的id为firstrow的时候，跳转到第一行
        if (this.id == 'firstrow') {
            // 当前选中的行为：当前表格中除了标题以外的第一行
            row = table.rows[1];
            // 赋值给输入框
            for (var i = 0; i < table.rows[0].cells.length; i++) {
                ipt[i].value = row.children[i].innerText
            }
        }
        // 当按钮的id为before的时候，切换到上一行
        if (this.id == 'before') {
            // 赋值给输入框
            for (var i = 0; i < table.rows[0].cells.length; i++) {
                if(row.previousElementSibling) ipt[i].value = row.previousElementSibling.children[i].innerText;
            }
            // 当前选中的行为：当前行的上一行
            if(row.previousElementSibling) row = row.previousElementSibling
        }
        // 当按钮的id为after的时候，切换到下一行
        if (this.id == 'after') {
            // 赋值给输入框
            for (var i = 0; i < table.rows[0].cells.length; i++) {
                if(row.nextElementSibling) ipt[i].value = row.nextElementSibling.children[i].innerText;
            }
            // 当前选中的行为：当前行的下一行
            if(row.nextElementSibling) row = row.nextElementSibling
        }
        // 当按钮的id为lastrow的时候，跳转到最后一行
        if (this.id == 'lastrow') {
            // 当前选中的行为：最后一行
            row = table.rows[table.rows.length - 1];
            // 赋值给输入框
            for (var i = 0; i < table.rows[0].cells.length; i++) {
                ipt[i].value = row.children[i].innerText
            }
        }
    }
}