使用纯JavaScript实现动态表格行的增删改查（CRUD）功能

                table {            border-collapse: collapse;            width: 500px;            margin: 20px;        }        th, td {            border: 1px solid black;            padding: 8px;            text-align: left;        }        .save {            display: none; /* 初始时隐藏保存按钮 */        }        input[type="text"] {            width: 90%; /* 使输入框适应单元格宽度 */        }                // 使用 document.write 动态生成表格        document.write("");        document.write("");        document.write("");        document.write("");        document.write("");        document.write("");        document.write("");        document.write("");        // 示例数据行        document.write("");        document.write("");        document.write("");        document.write("");        document.write("");        document.write("");        document.write("");        // 用于添加新行的输入区域        document.write(""); // 给添加行输入框所在的行一个ID，方便管理        document.write("");        document.write("");        document.write("");        document.write("");        document.write("");        document.write("");        document.write("
ID
Name
Address
Age
Action
1
Anu
Colombo
20
Edit SaveDelete
Add Row
");        // 所有的JavaScript函数将在此处定义        // ... (后续章节的代码将放在这里)    

        function addrow(){            var new_id_val = document.getElementById("new_id").value;            var new_name_val = document.getElementById("new_name").value;            var new_address_val = document.getElementById("new_address").value;            var new_age_val = document.getElementById("new_age").value;            var mytable = document.getElementById("TABLE");            // 获取当前表格的行数，用于生成新行的唯一ID            var t_length = mytable.rows.length - 1; // 减去用于添加新行的输入行            var newRowId = "row" + t_length;            // 创建新行的HTML字符串            var newRowHTML = "" +                                 "" + new_id_val + "" +                                 "" + new_name_val + "" +                                 "" + new_address_val + "" +                                 "" + new_age_val + "" +                                 "" +                                     "Edit " +                                     "Save " +                                     "Delete" +                                 "" +                             "";            // 在“添加新行”的输入行之前插入新行            var newRow = mytable.insertRow(t_length);            newRow.outerHTML = newRowHTML;            // 清空输入框            document.getElementById("new_id").value = "";            document.getElementById("new_name").value = "";            document.getElementById("new_address").value = "";            document.getElementById("new_age").value = "";        }

        function deleterow(buttonElement) {            // 获取按钮所在的 td 元素            var td = buttonElement.parentNode;             // 获取 td 所在的 tr 元素            var tr = td.parentNode;            // 从 tr 的父元素（tbody 或 table）中移除 tr            tr.parentNode.removeChild(tr);        }

        function editrow(x){            // 切换按钮显示状态：隐藏编辑按钮，显示保存按钮            document.getElementById("edit_button" + x).style.display = "none";            document.getElementById("save_button" + x).style.display = "block";            // 获取当前行各个单元格的DOM元素            var idCell = document.getElementById("id_row" + x);            var nameCell = document.getElementById("name_row" + x);            var addressCell = document.getElementById("address_row" + x);            var ageCell = document.getElementById("age_row" + x);            // 获取单元格的当前文本内容            var id_data = idCell.innerHTML;            var name_data = nameCell.innerHTML;            var address_data = addressCell.innerHTML;            var age_data = ageCell.innerHTML;            // 构建新的输入框HTML字符串，并预填充当前内容            var id_input = "";            var name_input = "";            var address_input = "";            var age_input = "";             // 关键步骤：将单元格的 innerHTML 替换为输入框            idCell.innerHTML = id_input;            nameCell.innerHTML = name_input;            addressCell.innerHTML = address_input;            ageCell.innerHTML = age_input;        } 

        function saverow(y){            // 获取输入框中的新值            var id_val = document.getElementById("id_text" + y).value;            var name_val = document.getElementById("name_text" + y).value;            var address_val = document.getElementById("address_text" + y).value;            var age_val = document.getElementById("age_text" + y).value;            // 将单元格的 innerHTML 替换为新的文本值            document.getElementById("id_row" + y).innerHTML = id_val;            document.getElementById("name_row" + y).innerHTML = name_val;            document.getElementById("address_row" + y).innerHTML = address_val;            document.getElementById("age_row" + y).innerHTML = age_val;            // 切换按钮显示状态：显示编辑按钮，隐藏保存按钮            document.getElementById("edit_button" + y).style.display = "block";            document.getElementById("save_button" + y).style.display = "none";        }

<!DOCTYPE html><html><head>    <title>动态表格CRUD</title>    <style>        table {            border-collapse: collapse;            width: 500px;            margin: 20px;        }        th, td {            border: 1px solid black;            padding: 8px;            text-align: left;        }        .save {            display: none; /* 初始时隐藏保存按钮 */        }        input[type="text"] {            width: 90%; /* 使输入框适应单元格宽度 */        }    </style></head><body>    <script>        document.write("<table id='TABLE' border='1' width='500'>");        document.write("<tr>");        document.write("<td>ID</td>");        document.write("<td>Name</td>");        document.write("<td>Address</td>");        document.write("<td>Age</td>");        document.write("<td>Action</td>");        document.write("</tr>");        document.write("<tr id='row1'>");        document.write("<td id='id_row1'>1</td>");        document.write("<td id='name_row1'>Anu</td>");        document.write("<td id='address_row1'>Colombo</td>");        document.write("<td id='age_row1'>20</td>");        document.write("<td><button id='edit_button1' class='edit' onclick='editrow("1")'>Edit</button> <button id='save_button1' class='save' onclick='saverow("1")'>Save</button><button class='delete' onclick='deleterow(this)'>Delete</button></td>");        document.write("</tr>");        document.write("<tr id='new_row_input'>");        document.write("<td id='id_new'><input type='text' id='new_id' placeholder='ID'></td>");        document.write("<td id='name_new'><input type='text' id='new_name' placeholder='Name'></td>");        document.write("<td id='address_new'><input type='text' id='new_address' placeholder='Address'></td>");        document.write("<td id='age_new'><input type='text' id='new_age' placeholder='Age'></td>");        document.write("<td><button onclick='addrow()'>Add Row</button></td>");        document.write("</tr>");        document.write("</table>");        function editrow(x){            document.getElementById("edit_button" + x).style.display = "none";            document.getElementById("save_button" + x).style.display = "block";            var idCell = document.getElementById("id_row" + x);            var nameCell = document.getElementById("name_row" + x);            var addressCell = document.getElementById("address_row" + x);            var ageCell = document.getElementById("age_row" + x);            var id_data = idCell.innerHTML;            var name_data = nameCell.innerHTML;            var address_data = addressCell.innerHTML;            var age_data = ageCell.innerHTML;            var id_input = "<input type='text' id='id_text" + x + "' value='" + id_data + "'>";            var name_input = "<input type='text' id='name_text" + x + "' value='" + name_data + "'>";            var address_input = "<input type='text' id='address_text" + x + "' value='" + address_data + "'>";            var age_input = "<input type='text' id='age_text" + x + "' value='" + age_data + "'>";             idCell.innerHTML = id_input;            nameCell.innerHTML = name_input;            addressCell.innerHTML = address_input;            ageCell.innerHTML = age_input;        }         function saverow(y){            var id_val = document.getElementById("id_text" + y).value;            var name_val = document.getElementById("name_text" + y).value;            var address_val = document.getElementById("address_text" + y).value;            var age_val = document.getElementById("age_text" + y).value;            document.getElementById("id_row" + y).innerHTML = id_val;            document.getElementById("name_row" + y).innerHTML = name_val;            document.getElementById("address_row" + y).innerHTML = address_val;            document.getElementById("age_row" + y).innerHTML = age_val;            document.getElementById("edit_button" + y).style.display = "block";            document.getElementById("save_button" + y).style.display = "none";        }        function deleterow(buttonElement) {            var td = buttonElement.parentNode;             var tr = td.parentNode;            tr.parentNode.removeChild(tr);        }        function addrow(){            var new_id_val = document.getElementById("new_id").value;            var new_name_val = document.getElementById("new_name").value;            var new_address_val = document.getElementById("new_address").value;            var new_age_val = document.getElementById("new_age").value;            var mytable = document.getElementById("TABLE");            var t_length = mytable.rows.length - 1; // 减去用于添加新行的输入行            var newRowId = "row" + t_length;            var newRowHTML = "<tr id='" + newRowId + "'>" +                                 "<td id='id_" + newRowId + "'>" + new_id_val + "</td>" +                                 "<td id='name_" + newRowId + "'>" + new_name_val + "</td>" +                                 "<td id='address_" + newRowId + "'>" + new_address_val + "</td>" +                                 "<td id='age_" + newRowId + "'>" + new_age_val + "</td>" +                                 "<td>" +                                     "<button id='edit_button" + t_length + "' class='edit' onclick='editrow("" + t_length + "")'>Edit</button> " +                                     "<button id='save_button" + t_length + "' class='save' onclick='saverow("" + t_length + "")'>Save</button> " +                                     "<button class='delete' onclick='deleterow(this