Как передать 2 аргумента в Jquery Find() метод

Question

Я создал таблицу, которая отображает данные, когда пользователь нажимает на кнопку Update получается ячейки таблицы в поле ввода, где пользователь может ввести данные ..

Когда я нажмите кнопку «Изменить», она успешно меняет 1 ячейку таблицы в поле ввода, но я не могу понять, как изменить другие ячейки таблицы, мне нужно изменить все ячейки таблицы за один клик.

$(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>

я добавил пример на JSFiddle любезно наставит меня, как достичь этого.

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

Answer 1

Удалить nth-child(2) из селектора. nth-child(2) вызывает выбор только n-го (в данном случае, второго) элемента и циклического ввода/замены на поле ввода.

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 только

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

});