如何更改HTML表格单元格使用jQuery

Question

文本输入

所以我有一个表，如下图所示：

<tbody> 
 
    <thead> 
 
    <tr> 
 
     <th>Date Registered</th> 
 
     <th>Name</th> 
 
     <th>Organisation</th> 
 
     <th>Email</th> 
 
     <th>Job Title</th> 
 
     <th>LSA</th> 
 
     <th>Edit</th>     
 
    </tr> 
 
    </thead> 
 
    
 
    <tr> 
 
    <td>29/Apr/16</td> 
 
    <td class="editableColumns">First Name Last Name</td> 
 
    <td class="editableColumns">Company Name</td> 
 
    <td class="editableColumns">firstname.lastname@company.com.au</td> 
 
    <td>LSA</td> 
 
    <td>Chris blogs</td> 
 
    <td><input id="editValues" type="button" value="Edit"></td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>29/Apr/16</td> 
 
    <td class="editableColumns">First Name Last Name</td> 
 
    <td class="editableColumns">Company Name</td> 
 
    <td class="editableColumns">firstname.lastname@company.com.au</td> 
 
    <td>LSA</td> 
 
    <td>Chris blogs</td> 
 
    <td><input id="editValues" type="button" value="Edit"></td> 
 
    </tr>

三列的名称，组织和电子邮件需点击编辑按钮即可编辑，但仅限于相关行。

所以，现在，以“editValues”的ID的“编辑”按钮，我已经绑定到这个jQuery的单击事件：

<script type="text/javascript"> 
 
     $('#editValues').click(function() { 
 
     $('tr td:nth-child(2)').each(function() { 
 
      var html = $(this).html(); 
 
      var input = $('<input class="editableColumnsStyle" id="editName" type="text" />'); 
 
      input.val(html); 
 
      $(this).html(input); 
 
     }); 
 
     });

在当前状态下此功能将选择所有td：nth-​​child（2）在每个表格行中。

我只需要编辑td：nth-​​child（2），td：nth-​​child（3）和td：nth-​​child（4）但是只在被点击的编辑按钮的相关行中。

Answer 1

id属性的值应该是唯一的在你的DOM，让您的按钮选择更好的使用类属性。

我创建了一个例子：

$('.editValues').click(function() { 
 
    $(this).parents('tr').find('td.editableColumns').each(function() { 
 
    var html = $(this).html(); 
 
    var input = $('<input class="editableColumnsStyle" type="text" />'); 
 
    input.val(html); 
 
    $(this).html(input); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border=1> 
 
<tbody> 
 
    <thead> 
 
    <tr> 
 
     <th>Date Registered</th> 
 
     <th>Name</th> 
 
     <th>Organisation</th> 
 
     <th>Email</th> 
 
     <th>Job Title</th> 
 
     <th>LSA</th> 
 
     <th>Edit</th>     
 
    </tr> 
 
    </thead> 
 
    <tr> 
 
    <td>29/Apr/16</td> 
 
    <td class="editableColumns">First Name Last Name</td> 
 
    <td class="editableColumns">Company Name</td> 
 
    <td class="editableColumns">firstname.lastname@company.com.au</td> 
 
    <td>LSA</td> 
 
    <td>Chris blogs</td> 
 
    <td><input class="editValues" type="button" value="Edit"></td> 
 
    </tr> 
 
    <tr> 
 
    <td>29/Apr/16</td> 
 
    <td class="editableColumns">First Name Last Name</td> 
 
    <td class="editableColumns">Company Name</td> 
 
    <td class="editableColumns">firstname.lastname@company.com.au</td> 
 
    <td>LSA</td> 
 
    <td>Chris blogs</td> 
 
    <td><input class="editValues" type="button" value="Edit"></td> 
 
    </tr> 
 
</table>

Answer 2

让喜欢你的代码一些变化：

<td><input id="editValues" type="button" value="Edit"></td> 

到

<td><input class="editValues" type="button" value="Edit"></td> 

，因为当你正在处理多个html元素，你不能在这种情况下使用的ID。

你的js脚本如：

$('.editValues').click(function() { 
    $(this).closest('tr'); 
    // this will return you the parnet tr, now apply dom traversing and make any column editable by appending a textbox in the corresponding td 
}); 

Answer 3

可以在表格单元格在默认情况下也增加投入，禁用它们，用造型来隐藏边框和背景等，然后使用jQuery onClick，您可以删除禁用的属性。