Javascript 在特定显示器中隐藏按钮

我有下面的数据表，其中有两个控制按钮，编辑和保存。我遇到的问题是在第一次预览时隐藏“保存”按钮

（我试图实现的输出是在第一页上，它应该只显示Edit，当用户单击Edit时，它应该显示save。）

请参阅代码片段以获取进一步解释

功能编辑_行（id）
{
var name=document.getElementById（“name_val”+id）.innerHTML；
var age=document.getElementById（“age_val”+id）.innerHTML；
document.getElementById（“name_val”+id）.innerHTML=“”；
document.getElementById（“age_val”+id）.innerHTML=“”；
document.getElementById（“编辑按钮”+id）.style.display=“无”；
document.getElementById（“保存按钮”+id）.style.display=“块”；
}
函数保存行（id）
{
var name=document.getElementById（“name\u text”+id）.value；
var age=document.getElementById（“age\u text”+id）.value；
$.ajax
({
类型：'post'，
url:'modify_records.php'，
数据：{
编辑行：'编辑行'，
行id:id，
姓名：姓名，
年龄：年龄
},
成功：功能（响应）{
如果（响应=“成功”）
{
document.getElementById（“name_val”+id）.innerHTML=name；
document.getElementById（“age_val”+id）.innerHTML=age；
document.getElementById（“编辑按钮”+id）.style.display=“块”；
document.getElementById（“保存按钮”+id）.style.display=“无”；
}
}
});
}
函数删除_行（id）
{
$.ajax
({
类型：'post'，
url:'modify_records.php'，
数据：{
删除行：'删除行'，
行id:id，
},
成功：功能（响应）{
如果（响应=“成功”）
{
var row=document.getElementById（“行”+id）；
row.parentNode.removeChild（row）；
}
}
});
}
函数插入_行（）
{
var name=document.getElementById（“新名称”）.value；
var age=document.getElementById（“新时代”）.value；
$.ajax
({
类型：'post'，
url:'modify_records.php'，
数据：{
插入行：'插入行'，
姓名：姓名，
年龄：年龄
},
成功：功能（响应）{
如果（响应！=“”）
{
var id=响应；
var table=document.getElementById（“用户表”）；
var table_len=（table.rows.length）-1；
var row=table.insertRow（table_len）.outerHTML=“”+名称+”“+年龄+”；
document.getElementById（“新名称”）.value=“”；
document.getElementById（“新时代”）.value=“”；
}
}
});
}

名称
年龄
测试名称
试验年龄

首先在HTML代码中为保存按钮设置

显示：无

，如下所示：

<input type='button' class="edit_button" id="edit_button" value="edit" 
   onclick="edit_row('');" style="display:block;">
<input type='button' class="save_button" id="save_button" value="save" 
   onclick="save_row('');" style="display:none;">

---

只需添加此

css

.save_button{
  display: none;
}

或者选择内联

css

style=“display:none”

进行第一次显示

功能编辑_行（id）
{
var name=document.getElementById（“name_val”+id）.innerHTML；
var age=document.getElementById（“age_val”+id）.innerHTML；
document.getElementById（“name_val”+id）.innerHTML=“”；
document.getElementById（“age_val”+id）.innerHTML=“”；
document.getElementById（“编辑按钮”+id）.style.display=“无”；
document.getElementById（“保存按钮”+id）.style.display=“块”；
}
函数保存行（id）
{
var name=document.getElementById（“name\u text”+id）.value；
var age=document.getElementById（“age\u text”+id）.value；
$.ajax
({
类型：'post'，
url:'modify_records.php'，
数据：{
编辑行：'编辑行'，
行id:id，
姓名：姓名，
年龄：年龄
},
成功：功能（响应）{
如果（响应=“成功”）
{
document.getElementById（“name_val”+id）.innerHTML=name；
document.getElementById（“age_val”+id）.innerHTML=age；
document.getElementById（“编辑按钮”+id）.style.display=“块”；
document.getElementById（“保存按钮”+id）.style.display=“无”；
}
}
});
}
函数删除_行（id）
{
$.ajax
({
类型：'post'，
url:'modify_records.php'，
数据：{
删除行：'删除行'，
行id:id，
},
成功：功能（响应）{
如果（响应=“成功”）
{
var row=document.getElementById（“行”+id）；
row.parentNode.removeChild（row）；
}
}
});
}
函数插入_行（）
{
var name=document.getElementById（“新名称”）.value；
var age=document.getElementById（“新时代”）.value；
$.ajax
({
类型：'post'，
url:'modify_records.php'，
数据：{
插入行：'插入行'，
姓名：姓名，
年龄：年龄
},
成功：功能（响应）{
如果（响应！=“”）
{
var id=响应；
var table=document.getElementById（“用户表”）；
var table_len=（table.rows.length）-1；
var row=table.insertRow（table_len）.outerHTML=“”+名称+”“+年龄+”；
document.getElementById（“新名称”）.value=“”；
document.getElementById（“新时代”）.value=“”；
}
}
});
}

。保存按钮{
显示：无；
}

名称
年龄
测试名称
试验年龄

您还可以使用visibility:hidden属性

这就足够了。我说的对吗？是的，这也很好，若你们的桌子只有一行的话。但如果你有不止一个，第一个就有了