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">[email protected]</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">[email protected]</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.

Dekel · Accepted Answer · 2016-08-08 01:40:24Z

4

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

answered Aug 8, 2016 at 1:40

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Harrison Campbell Over a year ago

Thanks a lot! I was searching for a way to find the parent. That worked perfectly.

Harrison Campbell Over a year ago

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?

Dekel Over a year ago

I guess you can add $(this).attr('type', 'submit') inside the click function.

Wim Mertens · Accepted Answer · 2016-08-08 01:43:44Z

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 8, 2016 at 1:43

Wim Mertens

1,7903 gold badges20 silver badges31 bronze badges

6 Comments

Harrison Campbell Over a year ago

Thanks, is there any benefit in keeping the DOM elements there and simply hiding them?

Wim Mertens Over a year ago

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 Over a year ago

There is an answer here on SO on how to enable/disable inputs on click. Just use classes instead of IDs: stackoverflow.com/questions/9649877/…

Harrison Campbell Over a year ago

Thanks heaps for that. I might alter my code to do this as well.

Wim Mertens Over a year ago

Also, added benefit in doing it this way, is that you can include the unique id and placeholder for each input...

|

Mayank Pandeyz · Accepted Answer · 2016-08-08 01:36:44Z

0

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

answered Aug 8, 2016 at 1:36

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related