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