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>

单击名称，组织和电子邮件需要在单击编辑按钮时进行编辑，但仅限于相关行。

所以现在，'edit'按钮的id为'editValues'，我已经绑定到这个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中应该是唯一的，因此您最好使用class属性来选择按钮。

我为你创建了一个例子：

$('.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，您可以删除禁用的属性。

如何使用jQuery将html表格单元格更改为文本输入

3 个答案: