html-css-js
/
16表格的增删改查.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>16 表格的增删改查</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            /* table 边框合并 */
            margin: 10px;
        }

        th,
        td {
            border: 1px solid gray;
            padding: 8px;
            text-align: center;
        }

        th {
            background-color: antiquewhite;
        }

        button {
            margin: 8px;
        }

        .addbtn {
            padding: 6px;
        }
    </style>
</head>

<body>
    <h1 style="text-align: center;">16 表格的增删改查</h1>
    <button class="addbtn" onclick="addRow()">新增数据</button>
    <table id="tab">
        <tr>
            <th>姓名</th>
            <th>联系方式</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>白龙马</td>
            <td>18910968121</td>
            <td>
                <button onclick="editRow(this)">编辑</button><button onclick="deleteRow(this)">删除</button>
            </td>
        </tr>
    </table>
</body>

</html>
<script>
// 新增数据
function addRow() {
    // 获取表格对象
    let tab = document.getElementById('tab');
    // console.log(tab);
    // 获取插入的位置
    let length = tab.rows.length;
    //console.log(length);
    // 插入行节点
    let newRow = tab.insertRow(length)
    // console.log(newRow)
    // 插入列节点对象
    let namecol = newRow.insertCell(0);
    let phonecol = newRow.insertCell(1);
    let actioncol = newRow.insertCell(2);
    // 修改节点文本内容
    namecol.innerHTML = "未知";
    phonecol.innerHTML = "无";
    actioncol.innerHTML = '<button onclick="editRow(this)">编辑</button><button onclick="deleteRow(this)">删除</button>';
}

// 删除行
function deleteRow(button) {
    // console.log(button);
    // 获取行
    let row = button.parentNode.parentNode;
    // console.log(row);
    // 删除行
    row.parentNode.removeChild(row);
}

// 编辑行
function editRow(button) {
    // console.log(button);
    // 获取行
    let row = button.parentNode.parentNode;
    // console.log(row);
    let name = row.cells[0];
    let phone = row.cells[1];

    let inputName = prompt("请输入姓名:",name.innerHTML);
    let inputPhone = prompt("请输入手机号:",phone.innerHTML);

    if (inputName !== null ){
        name.innerHTML = inputName;
    }

    if (inputPhone !== null ){
        phone.innerHTML = inputPhone;
    }

}
</script>