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

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>