如何使用jQuery将HTML表格单元格更改为文本输入 [英] How do I change html table cells to a text-input using jQuery

问题描述

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

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">[e-mail]</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">[e-mail]</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">[e-mail]</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">[e-mail]</td>
    <td>LSA</td>
    <td>Chris blogs</td>
    <td><input class="editValues" type="button" value="Edit"></td>
  </tr>
</table>

这篇关于如何使用jQuery将HTML表格单元格更改为文本输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！