javascript - How to pass 2 arguments to jquery Find() method -
i have created table displays data, when user click on update button turns table cells input field user can enter data..
when click on edit button changes 1 cell of table input field, unable understand how change other cells of table, need change cells of 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 example on jsfiddle kindly guide me how achieve this.
remove nth-child(2) selector. nth-child(2) causes nth (in case, second) element selected , looped through / replaced 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); }); }); 
Comments
Post a Comment