How do I change html table cells to a text-input using jQuery

Question

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.

score 4 · Accepted Answer · answered Aug 08 '16 at 01:40

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>

Thanks a lot! I was searching for a way to find the parent. That worked perfectly. — Harrison Campbell, Aug 08 '16 at 01:49
Would you happen to have an easy way of simply adding on a function that will change the edit button to a save button once it has been clicked and the elements have changed to text-inputs? — Harrison Campbell, Aug 08 '16 at 02:46
I guess you can add `$(this).attr('type', 'submit')` inside the click function. — Dekel, Aug 08 '16 at 02:49

score 2 · Answer 2 · answered Aug 08 '16 at 01:43

2

You can also add the inputs in the table cells by default, disable them and use styling to hide border and background etc. then with jQuery onClick you can remove the attribute disabled.

answered Aug 08 '16 at 01:43

Wim Mertens

1,780
3
20
31

Thanks, is there any benefit in keeping the DOM elements there and simply hiding them? – Harrison Campbell Aug 08 '16 at 01:57
1

Yes it doesn't need to replace any html, you can do most of it with css styling. The jquery will be much simpler thus improving performance. – Wim Mertens Aug 08 '16 at 02:00
There is an answer here on SO on how to enable/disable inputs on click. Just use classes instead of IDs: http://stackoverflow.com/questions/9649877/how-to-disable-enable-input-field-on-click-with-jquery – Wim Mertens Aug 08 '16 at 02:11
Thanks heaps for that. I might alter my code to do this as well. – Harrison Campbell Aug 08 '16 at 02:14
Also, added benefit in doing it this way, is that you can include the unique id and placeholder for each input... – Wim Mertens Aug 08 '16 at 02:22
Thanks, that seems to benefit the purposes of my site a lot more than removing the DOM element. – Harrison Campbell Aug 08 '16 at 02:45

score 0 · Answer 3 · answered Aug 08 '16 at 01:36

make few changes in your code like:

<td><input id="editValues" type="button" value="Edit"></td>

to

<td><input class="editValues" type="button" value="Edit"></td>

because when you are dealing with multiple html element you cannot use id in that case.

Your js script be like:

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

How do I change html table cells to a text-input using jQuery

3 Answers3

Linked