如何将2个参数传递给jquery Find（）方法

Question

I have created a table that displays data, when user click on Update button it turns table cells into input field where user can enter the data..

When i click on edit button it successfully changes 1 cell of table into input field, but i am unable to understand how to change other cells of the table, i need to change all cells of the table in single click.

 $(document).on("click", ".updateUser", function() { $(this).closest('tr').find('td:nth-child(2)').each(function() { var html = $(this).html(); var input = $('<input type="text" />'); input.val(html); $(this).html(input); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table class="table table-hover"> <thead> <tr> <th>#</th> <th>Username</th> <th>Password</th> <th>Role</th> <th>Edit</th> <th>Delete</th> </tr> </thead> <tbody> <tr> <td>ID</td> <td>Username </td> <td>Password </td> <td>Role </td> <td> <button type="button" class="updateUser btn btn-primary btn-xs" data-userId="<?php echo $id; ?>"> EDIT BUTTON </button> </td> </tr> </tbody> </table> 

I have added the example on JSFiddle kindly guide me how to achieve this.

https://jsfiddle.net/tahakirmani/g7vrskpz/3/

Answer 1

Remove nth-child(2) from the selector. nth-child(2) causes only the nth (in this case, second) element to be selected and looped through / replaced by an input box.

https://jsfiddle.net/g7vrskpz/4/

 $(document).on("click", ".updateUser", function() {
   $(this).closest('tr').find('td').each(function() {
     var html = $(this).html();
     var input = $('<input type="text" />');
     input.val(html);
     $(this).html(input);
   });

 });

Edit: First 3 only

https://jsfiddle.net/g7vrskpz/5/

 $(document).on("click", ".updateUser", function() {
   $(this).closest('tr').find('td:nth-child(1),td:nth-child(2),td:nth-child(3)').each(function() {
     var html = $(this).html();
     var input = $('<input type="text" />');
     input.val(html);
     $(this).html(input);
   });

 });