javascript – 每行按钮的Html表

前端之家收集整理的这篇文章主要介绍了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>

Javascript(使用jQuery):

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

编辑:

显然我应该先看看你的示例代码;)

您需要更改(至少)每个元素的ID属性. ID是页面上每个元素的唯一标识符,这意味着如果您有多个具有相同ID的项目,则会出现冲突.

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

JSFiddle sample

猜你在找的JavaScript相关文章