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

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>

单击编辑按钮后，“名称”、“组织”和“电子邮件”三列需要可编辑，但只能在相关行中进行编辑。

现在，ID 为“editValues”的“编辑”按钮，我已绑定(bind)到此 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>