每行带有按钮的 HTML 表格答案

【问题标题】：Html table with button on each row每行带有按钮的 HTML 表格
【发布时间】：2018-09-18 04:49:57
【问题描述】：

我有一个多行一列的表格。每个表格单元格中都有一个按钮。像这样：

<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>

我想做什么：当按下其中一个按钮时，我想将其值从“编辑”更改为“修改”。有什么想法吗？

【问题讨论】：

标签： javascript html-table

【解决方案1】：

很确定这可以解决您正在寻找的问题：

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（使用 jQuery）：

$(document).ready(function(){
    $('.editbtn').click(function(){
        $(this).html($(this).html() == 'edit' ? 'modify' : 'edit');
    });
});

编辑：

显然我应该先看看你的示例代码；）

您需要（至少）更改每个元素的 ID 属性。 ID 是页面上每个元素的唯一标识符，这意味着如果您有多个具有相同 ID 的项目，则会发生冲突。

通过使用类，您可以将相同的逻辑应用于多个元素而不会发生任何冲突。

JSFiddle sample

【讨论】：

考虑为按钮提供 id，但我从 .xql 文件中获取此表，该文件从 xml 文件中获取其元素。所以我不知道有多少行。在没有 JQuery 的情况下这样做有什么想法吗？
虽然重复的 id 不是严格有效的，但如果您想通过 id 访问按钮，它们只是一个问题。行索引重要吗？

【解决方案2】：

在桌面上放置一个监听器。当它从带有名称为“edit”且值为“edit”的按钮的输入中获得点击时，将其值更改为“modify”。去掉输入的 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>

【讨论】：