使用Javascript使表格行可在单击时编辑
的方法如下：
- 首先，为表格的每一行添加一个点击事件监听器，当行被点击时触发编辑模式。
- 在点击事件处理程序中，获取当前被点击的行，并将其转换为可编辑状态。
- 创建一个保存按钮，当点击保存按钮时，将编辑后的数据保存并退出编辑模式。
- 添加取消按钮，当点击取消按钮时，放弃编辑并恢复原始数据。
- 使用HTML的contenteditable属性使表格单元格可编辑。
下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<table id="myTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
<tr>
<td contenteditable="true">John Doe</td>
<td contenteditable="true">johndoe@example.com</td>
<td>
<button onclick="editRow(this)">Edit</button>
<button onclick="saveRow(this)">Save</button>
<button onclick="cancelEdit(this)">Cancel</button>
</td>
</tr>
<tr>
<td contenteditable="true">Jane Smith</td>
<td contenteditable="true">janesmith@example.com</td>
<td>
<button onclick="editRow(this)">Edit</button>
<button onclick="saveRow(this)">Save</button>
<button onclick="cancelEdit(this)">Cancel</button>
</td>
</tr>
</table>
<script>
function editRow(button) {
var row = button.parentNode.parentNode;
var cells = row.getElementsByTagName("td");
for (var i = 0; i < cells.length - 1; i++) {
cells[i].setAttribute("contenteditable", "true");
}
button.style.display = "none";
row.querySelector("button:nth-of-type(2)").style.display = "inline";
row.querySelector("button:nth-of-type(3)").style.display = "inline";
}
function saveRow(button) {
var row = button.parentNode.parentNode;
var cells = row.getElementsByTagName("td");
for (var i = 0; i < cells.length - 1; i++) {
cells[i].setAttribute("contenteditable", "false");
}
button.style.display = "none";
row.querySelector("button:nth-of-type(1)").style.display = "inline";
row.querySelector("button:nth-of-type(3)").style.display = "none";
}
function cancelEdit(button) {
var row = button.parentNode.parentNode;
var cells = row.getElementsByTagName("td");
for (var i = 0; i < cells.length - 1; i++) {
cells[i].setAttribute("contenteditable", "false");
cells[i].innerText = cells[i].getAttribute("data-original-value");
}
button.style.display = "none";
row.querySelector("button:nth-of-type(1)").style.display = "inline";
row.querySelector("button:nth-of-type(2)").style.display = "none";
}
</script>
</body>
</html>这段代码创建了一个简单的表格，每一行都有一个编辑按钮。当点击编辑按钮时，对应行的单元格将变为可编辑状态。保存按钮用于保存编辑后的数据，取消按钮用于放弃编辑并恢复原始数据。
请注意，这只是一个简单的示例，实际应用中可能需要更复杂的逻辑和验证。此外，这个示例中使用了纯Javascript和HTML来实现，没有使用任何特定的云计算产品。
希望这个答案能够满足你的需求。如果有任何问题，请随时提问。
相关·内容
1回答
使用Javascript使表格行可在单击时编辑
javascript
我想在点击编辑按钮后使我的列表中的行可编辑。我为我想要更改的每一行设置了editablecontent=为true，并使用onclick事件添加了焦点，但这只对第一项有效。你能推荐其他使每一行的内容可编辑的方法吗？我最近开始学习javascript，所以vanilla javascript会更好。谢谢!
浏览 20提问于2019-12-23得票数 0
2回答
如何制作类似于“谷歌表格”的表格？
javascript、jquery、google-sheets、html-table
现在我正在处理表格。如何使"Google sheets“类似或"Handsontable”类似于表格(可在单击时编辑，突出显示等)，而不仅仅是"table，tr，td“。我不允许使用API，所以我想知道如何创建网格。
浏览 27提问于2019-10-29得票数 0
回答已采纳
2回答
使用javascript单击“编辑”按钮时，如何使行可编辑？
javascript、jquery、html-table、row
});
我希望在单击“编辑”按钮时使行可编辑，如何做到这一点？
浏览 5提问于2015-10-21得票数 1
2回答
单击事件不止一次，但每次单击后取消绑定
jquery、rows
我想做的是:每次我点击一个表格行，它就进入编辑模式。当我单击另一行时，我以前单击的行退出编辑模式，而我刚才单击的行则进入编辑模式。function editRow(row) {
/* awesome code her
浏览 5提问于2011-08-28得票数 1
回答已采纳
2回答
如何使用angular5编辑表中的特定行？
typescript、angular5、edit-tableview
我想编辑特定的行，点击表格中的编辑按钮。但当它使所有行都可编辑时。我有一个有多行的表。当我单击表中的“编辑”按钮时，使表的所有行都可编辑。这是我在stackblitz的代码
我只想要点击行编辑。我该怎么做呢？
浏览 0提问于2019-01-09得票数 0
回答已采纳
2回答
如何在单击按钮时将动态行添加到表中，并使用Ember使现有行在单击时可编辑
javascript、ember.js
我想要编辑表行，因此对于单击时，我想使列作为文本框，以便我可以编辑和保存。谢谢!这个jsbin有一个表格和一个按钮。单击按钮时，在表格中添加动态行，并将列作为文本框，以便用户可以输入数据，按下另一个按钮即可保存数据。
浏览 2提问于2014-10-28得票数 1
2回答
ASP.NET MVC内联编辑
javascript、asp.net、asp.net-mvc、ajax、asp.net-mvc-2
我正在构建一个MVC2 web应用程序，其中我想要显示关于某些东西(父项)的信息，以及显示为行的子项详细信息(子项与父项具有多对一关系)。在使用Ajax.BeginForm和部分视图之前，我已经在MVC中实现了AJAX。
我想添加使用ajax内联编辑子行的功能，但我想知道其他人是如何实现这一功能的。MVC中有没有可以做到这一点的工具？
浏览 0提问于2010-10-15得票数 2
回答已采纳
1回答
使文本字段可在按钮单击时编辑
javascript、node.js、reactjs
当我单击一个按钮时，我希望这个字段是可编辑的。
这能在ReactJS中完成吗？
浏览 4提问于2015-10-07得票数 0
回答已采纳
2回答
使行可以单击jQuery数据表，也是隐藏的行
javascript、jquery、html
{ }));
，我的新条目不能点击。如何以同样可以单击新条目的方式加载javascript？
浏览 2提问于2016-02-21得票数 0
回答已采纳
4回答
嵌套表单(设计问题)
html、ruby-on-rails、css、ruby
项目A编辑项目B编辑项目C编辑但是所有的列表都是可批量编辑的，因此每个项目旁边都有一个复选框。名单上有一张表格</em
浏览 0提问于2009-07-17得票数 0
回答已采纳
1回答
副作用最小的可编辑表格单元格
html、html-table、cell、edit
我希望使表格单元格可编辑，使它看起来和感觉上都像是在编辑单元格内容，而不是编辑表单元格中某些元素的内容。具体来说，我想：
看不到除表格单元格元素之外的其他元素的任何视觉效果，可以单击单元格内的任何位置并开始键入文本(无论表格中的其他单元格可能有多高或多宽)不必指定任何绝对高度或宽度()，编辑的文本与不可编辑单元格的内容对表行和列维度的贡献方式与一样我可以在TD元素中放置我想要的任何
浏览 2提问于2020-10-26得票数 0
回答已采纳
1回答
双击以在适用于iFrame的IOS上创建工作链接
javascript、html、ios、css、iframe
我使用的是使用iFrame的html代码。这使得ios可以点击两次，让链接变得可行。当我移除iFrame时，它在单击一下就能正常工作。有什么建议吗？
浏览 0提问于2018-05-24得票数 0
2回答
有什么方法可以使触发器或按钮让用户按下并运行，而不是去脚本编辑器呢？
javascript、google-apps-script
我在我的脚本编辑器中做了一些功能，但是每次我需要我的电子表格运行时，我需要转到脚本编辑器并按下run按钮让脚本运行得更快，否则运行需要几分钟。我想知道是否有任何方法在我的工作表中做一个按钮，或触发器运行它，每次不需要去脚本编辑器？
浏览 8提问于2016-10-03得票数 0
回答已采纳
3回答
在jQuery中使用上下文和"this“
javascript、jquery
我正在处理一个项目，该项目要求在单击另一个表中的等效行时，使表中的单元格可编辑。我遇到的问题是，我不能让它只使可更新表中的一行可编辑，而是使每一行的每个单元格都可编辑。下面是一个关于jsfiddle的示例，演示了这个问题：
在此示例中，如果您在顶部的表中单击"Row 1“，下面表格的第一行应该将其单元格的内容替换为输入。相反，底部表中的两行都变得可编辑。
浏览 5提问于2011-07-28得票数 0
回答已采纳
11回答
替换Apache中的文本
java、ms-word、apache-poi、xwpf
我刚刚发现Apache库对于使用Java编辑Word文件非常有用。具体来说，我想使用Apache的XWPF类编辑DOCX文件。我没有找到合适的方法/文档来完成这个任务。**案文可在一行/段落或表格行/栏中
(预先谢谢:)
浏览 0提问于2014-03-08得票数 55
回答已采纳
1回答
在单击按钮时使整行可编辑
java、swing、jtable、jbutton、tablecolumn
我想使整个行可编辑...例如，如果用户选择列1然后单击编辑按钮，表格将在可编辑的form...it中显示整个行，如果任何人只能在按钮事件上给出代码将是很棒的。
浏览 0提问于2012-12-04得票数 0
1回答
Javascript点击函数，如何避免其他链接？
javascript、jquery、ruby-on-rails
我有以下javascript，它可以将表格行转换为链接： $("tr[data-link]").click(function() {
window.location = $(this).data(JS触发并链接到新的page...which，则无法单击底部表单的“编辑”，并使用此javascript： $(document).on('turbolinks:load', function(){链接重定向，我无法单击</e
浏览 19提问于2019-06-28得票数 1
1回答
使表行可单击以使用javascript和mvc获取控制器操作
javascript、ajax、asp.net-mvc
我正在尝试使用javascript使表格行可点击。我有一个包含customers的表，当单击该行时，它应该转发到detals视图。但是现在我坚持使用javascript。首先，我似乎不能得到行的id ..其次，它似乎没有调用客户控制器中的Details方法……我的javascript：$(do
浏览 3提问于2012-09-02得票数 1
回答已采纳
2回答
如何使单个Primeng DataTable行可在角2中单击按钮编辑
angular、primeng
我正在尝试使用DataTable从Primeng在角2。在单击任意行的编辑按钮时，该行的所有字段都应该是可编辑的。edit(rowdata:TestCases,index:number) {
rowdata.isEditable=true;使用此代码，该行的属性设置为可编辑，但在UI字段中是不可
浏览 2提问于2017-08-10得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
