Harrison Campbell Harrison Campbell - 3 months ago 22
jQuery Question

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

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);
});
});





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

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.

Answer

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>