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

问题描述：

所以我有一张桌子，如下所示:

So I have a table, shown below:

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

单击编辑"按钮后，名称"，组织"和电子邮件"这三列需要可编辑，但仅在相关行中.

The three columns Name, Organisation and Email need to be editable upon clicking the edit button, BUT only in the relevant row.

所以现在，我将ID为'editValues'的'Edit'按钮绑定到此jQuery click事件:

So now, the 'Edit' button with the id of 'editValues', I have binded to this jQuery click event:

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

In its current state this function will select all td:nth-child(2) in every table row.

我需要的是仅在单击的编辑按钮的相关行中编辑td:nth-child(2)，td:nth-child(3)和td:nth-child(4).

What I require is to edit the td:nth-child(2), td:nth-child(3) and td:nth-child(4) BUT only in the relevant row of the edit button that is clicked.

答

id属性的值在您的DOM中应该是唯一的，因此最好使用class属性来选择按钮.

id attribute's values should be unique in your DOM, so you better use class attribute for the selection of your buttons.

我为您创建了一个示例:

I created an example for you:

$('.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>

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

相关推荐