"how do i change html table cells to a text-input using jquery" Code 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>

By Eugene Mankovski on January 10 2022