JavaScript动态CRUD表格实现Save按钮仅Edit时显示的问题求解

API 探路者

2026-9-26

问题根因

你直接从新增行代码里移除Save按钮元素，会导致edit_row函数执行时找不到对应id的Save按钮DOM节点，自然无法将其切换为显示状态，不需要删除按钮元素，只要默认设置为隐藏即可。

修复方案

你原有逻辑里的edit_row、save_row的显示隐藏逻辑完全可用，只需做以下任意一种修改即可实现需求：

方案1：添加全局CSS统一控制（更易维护）

在<head>标签里添加如下样式，所有带save类的按钮会默认隐藏：

<style>
.save {
  display: none;
}
</style>

方案2：给每个Save按钮加内联隐藏样式

如果不想加全局样式，分别修改两处代码：

给页面初始的3行Save按钮都加style="display:none"属性，示例：

<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')" style="display:none">

修改add_row函数里的新增行代码，给新增的Save按钮也加隐藏属性：

var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='name_row"+table_len+"'>"+new_name+"</td><td id='country_row"+table_len+"'>"+new_country+"</td><td id='age_row"+table_len+"'>"+new_age+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")' style='display:none'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";

修改完成后即可实现效果：