帶有每行按鈕的Html表

嘿傢伙。我有一個表有多行和一列。每個表格單元格中都有一個按鈕。就像這樣：帶有每行按鈕的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>

我想要做的：當按下一個按鈕，我想它的價值從「編輯」「修改」改變。有什麼想法？

來源

2011-04-03 Andrew

很肯定這解決了你在找什麼：

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

來源

2011-04-03 08:19:44

想過關於給按鈕的id，但我從一個.xql文件中得到這個表，它從xml文件中獲取它的元素。所以我不知道有多少行。任何想法沒有JQuery做到這一點？ – Andrew 2011-04-03 08:32:24

雖然重複的ID不是嚴格有效的，但如果您想通過ID訪問按鈕，則這只是一個問題。行索引是否重要？ – RobG 2011-04-03 11:51:22

放單聽衆在桌子上。當一個名稱爲「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>

來源

2011-04-03 09:40:33 RobG

帶有每行按鈕的Html表

回答

相關問題