带有每行按钮的Html表格 [英] Html table with button on each row

问题描述

伙计们。
我有一个包含多行和一列的表格。每个表格单元格中都有一个按钮。像这样：

 < table id =table1border =1> 
< thead> 
< tr> 
< th>选择< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td> 
 
< input id =edittype =submitname =editvalue =Edit/> 
< / form> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
  

我想要做什么：当按下其中一个按钮时，我想将其值从编辑为修改。
任何想法？

解决方案

很确定这解决了您要查找的内容：

HTML：

 < table> 
< tr>< td>< button class =editbtn>编辑< /按钮>< / td>< / tr> 
< tr>< td>< button class =editbtn>编辑< /按钮>< / td>< / tr> 
< tr>< td>< button class =editbtn>编辑< /按钮>< / td>< / tr> 
< tr>< td>< button class =editbtn>编辑< /按钮>< / td>< / tr> 
< / table> 
  

Javascript（使用jQuery）：

  $（document）.ready（function（）{
 $（'。editbtn'）。click（function（）{
 $ （this）.html（$（this）.html（）=='edit'？'modify'：'edit'）; 
}）; 
}）; 
  

编辑：

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

你需要改变（至少）每个元素的ID属性。该ID是页面上每个元素的唯一标识符，这意味着如果您有多个具有相同ID的项目，则会发生冲突。

通过使用类，您可以将相同的逻辑应用于多个元素，而不会产生任何冲突。
$ b JSFiddle示例

Hey guys. I have a table with multiple rows and one column.Each table cell has a button in it. Like this:

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

What I want to do: when one of the buttons is pressed I would like to change its value from "Edit" to "Modify". Any idea?

解决方案

Pretty sure this solves what you're looking for:

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 (using jQuery):

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

Edit:

Apparently I should have looked at your sample code first ;)

You need to change (at least) the ID attribute of each element. The ID is the unique identifier for each element on the page, meaning that if you have multiple items with the same ID, you'll get conflicts.

By using classes, you can apply the same logic to multiple elements without any conflicts.

JSFiddle sample

这篇关于带有每行按钮的Html表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！