纯JavaScript实现动态表格行编辑功能异常修复

完全不需要后端PHP支持，纯前端即可实现，原有编辑功能失效是几个低级语法和逻辑遗漏导致的，直接修正即可。

核心问题点 #

• 行内事件引号嵌套错误：onclick属性用单引号包裹时，内部传参又使用单引号，导致HTML属性解析断裂，点击按钮无法触发对应JS函数
• editrow函数逻辑遗漏：拼接完编辑用的输入框HTML字符串后，没有将字符串写入对应单元格，输入框根本不会渲染到页面上
• 初始交互状态错误：保存按钮默认没有设置隐藏，页面加载时会同时显示编辑、保存两个按钮
• 新增行ID生成逻辑缺陷：删除中间行后再新增，容易出现行ID重复，导致功能错乱

修复后完整可运行代码 #

<script>
// 全局行ID计数器，避免ID重复
let rowIdCounter = 2;

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')\" style='display:none'>Save</button><button class='delete' onclick='deleterow()'>Delete</button></td>");
    document.write("</tr>");

    document.write("<tr id='row_add'>");
        document.write("<td id='id_row_add'><input type='text' id='new_id'></td>");
        document.write("<td id='name_row_add'><input type='text' id='new_name'></td>");
        document.write("<td id='address_row_add'><input type='text' id='new_address'></td>");
        document.write("<td id='age_row_add'><input type='text' id='new_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 id=document.getElementById("id_row"+x);
    var name=document.getElementById("name_row"+x);
    var address=document.getElementById("address_row"+x);
    var age=document.getElementById("age_row"+x);

    var id_data=id.innerHTML;
    var name_data=name.innerHTML;
    var address_data=address.innerHTML;
    var age_data=age.innerHTML;
        
    id_data="<input type='text' id='id_text"+x+"' value='"+id_data+"'>";
    name_data="<input type='text' id='name_text"+x+"' value='"+name_data+"'>";
    address_data="<input type='text' id='address_text"+x+"' value='"+address_data+"'>";
    age_data="<input type='text' id='age_text"+x+"' value='"+age_data+"'>"; 

    // 补全逻辑：将输入框写入对应单元格
    id.innerHTML = id_data;
    name.innerHTML = name_data;
    address.innerHTML = address_data;
    age.innerHTML = age_data;
} 

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() {
    var td = event.target.parentNode; 
    var tr = td.parentNode;
    tr.parentNode.removeChild(tr);
}

function addrow(){
    var new_id=document.getElementById("new_id").value;
    var new_name=document.getElementById("new_name").value;
    var new_address=document.getElementById("new_address").value;
    var new_age=document.getElementById("new_age").value;

    // 空值校验
    if(!new_id || !new_name || !new_address || !new_age) {
        alert("请填写完整所有字段");
        return;
    }
        
    var mytable=document.getElementById("TABLE");
    var insertIndex = mytable.rows.length -1;
    rowIdCounter++;
    // 修正引号嵌套，默认隐藏保存按钮
    var newRowHtml = "<tr id='row"+rowIdCounter+"'><td id='id_row"+rowIdCounter+"'>"+new_id+"</td><td id='name_row"+rowIdCounter+"'>"+new_name+"</td><td id='address_row"+rowIdCounter+"'>"+new_address+"</td><td id='age_row"+rowIdCounter+"'>"+new_age+"</td><td><input type='button' id='edit_button"+rowIdCounter+"' value='Edit' class='edit' onclick=\"editrow('"+rowIdCounter+"')\"> <input type='button' id='save_button"+rowIdCounter+"' value='Save' class='save' onclick=\"saverow('"+rowIdCounter+"')\" style='display:none'> <input type='button' value='Delete' class='delete' onclick='deleterow()'></td></tr>";
    mytable.insertRow(insertIndex).outerHTML = newRowHtml;

    document.getElementById("new_id").value="";
    document.getElementById("new_name").value="";
    document.getElementById("new_address").value="";
    document.getElementById("new_age").value="";
}
</script>

逻辑说明 #

• 点击编辑按钮时，对应行的普通文本会替换为带当前值的输入框，同时隐藏编辑按钮、显示保存按钮
• 修改完内容点击保存，会把输入框的值提取出来写回单元格，切回文本展示状态，按钮状态同步切换
• 删除按钮直接移除当前行DOM，新增行固定插入到最后一行（输入行）的上方，不会打乱新增输入区的位置
• 所有逻辑都在前端完成，不需要任何后端接口支持

内容的提问来源于stack exchange，提问作者Nirantharika Selvachandran