Javascript 每行带有按钮的 HTML 表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5528419/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Html table with button on each row
提问by Andrew
I have a table with multiple rows and one column. Each table cell has a button in it. Like this:
我有一个多行一列的表格。每个表格单元格中都有一个按钮。像这样：
<table id="table1" border="1">
<thead>
<tr>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<form name="f2" action="javascript:select();" >
<input id="edit" type="submit" name="edit" value="Edit" />
</form>
</td>
</tr>
</tbody>
</table>
What I want to do: when one of the buttons is pressed I would like to change its value from "Edit" to "Modify". Any idea?
我想要做什么：当按下其中一个按钮时，我想将其值从“编辑”更改为“修改”。任何的想法？
回答by Demian Brecht
Pretty sure this solves what you're looking for:
很确定这可以解决您正在寻找的问题：
HTML:
HTML：
<table>
<tr><td><button class="editbtn">edit</button></td></tr>
<tr><td><button class="editbtn">edit</button></td></tr>
<tr><td><button class="editbtn">edit</button></td></tr>
<tr><td><button class="editbtn">edit</button></td></tr>
</table>
Javascript (using jQuery):
Javascript（使用jQuery）：
$(document).ready(function(){
$('.editbtn').click(function(){
$(this).html($(this).html() == 'edit' ? 'modify' : 'edit');
});
});
Edit:
编辑：
Apparently I should have looked at your sample code first ;)
显然我应该先看看你的示例代码;)
You need to change (at least) the ID attribute of each element. The ID is the unique identifier for each element on the page, meaning that if you have multiple items with the same ID, you'll get conflicts.
您需要（至少）更改每个元素的 ID 属性。ID 是页面上每个元素的唯一标识符，这意味着如果您有多个具有相同 ID 的项目，则会发生冲突。
By using classes, you can apply the same logic to multiple elements without any conflicts.
通过使用类，您可以将相同的逻辑应用于多个元素而不会产生任何冲突。
回答by RobG
Put a single listener on the table. When it gets a click from an input with a button that has a name of "edit" and value "edit", change its value to "modify". Get rid of the input's id (they aren't used for anything here), or make them all unique.
在桌子上放一个监听器。当它从带有名称为“edit”且值为“edit”的按钮的输入中获得点击时，将其值更改为“修改”。去掉输入的 id（它们在这里不用于任何东西），或者使它们都是唯一的。
<script type="text/javascript">
function handleClick(evt) {
var node = evt.target || evt.srcElement;
if (node.name == 'edit') {
node.value = "Modify";
}
}
</script>
<table id="table1" border="1" onclick="handleClick(event);">
<thead>
<tr>
<th>Select
</thead>
<tbody>
<tr>
<td>
<form name="f1" action="#" >
<input id="edit1" type="submit" name="edit" value="Edit">
</form>
<tr>
<td>
<form name="f2" action="#" >
<input id="edit2" type="submit" name="edit" value="Edit">
</form>
<tr>
<td>
<form name="f3" action="#" >
<input id="edit3" type="submit" name="edit" value="Edit">
</form>
</tbody>
</table>
