javascript - 每行带有按钮的 Html 表格

Question

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

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

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

Answer 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