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

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

Html表与每行按钮

2 个答案: