带有每行按钮的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表

回答

相关问题