Javascript 每行带有按钮的Html表格

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

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

挑选

我想做的是：当按下其中一个按钮时，我想将其值从“编辑”更改为“修改”。

---

有什么想法吗？

这肯定能解决您的问题：

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>

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

编辑：

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

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

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

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

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

---

在桌子上放一个听众。当它通过一个名为“编辑”且值为“编辑”的按钮从输入中单击时，将其值更改为“修改”。去掉输入的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>

函数handleClick（evt）{
var节点=evt.target | | evt.src元素；
如果（node.name==“编辑”）{
node.value=“修改”；
}
}
挑选

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