0
1.3K
ViewsHow to select Just 1 Row from a Table using Jquery
I have a created table where i display multiple records..I want to add update functionality using Ajax..
I have written the following code, When i click on any row it make all rows editable..I only want to edit the specific row in which i clicked.
Kindly guide me how to achieve this.
<button type="button"
class="updateUser btn btn-primary btn-xs" data-userId="<?php echo $id; ?>">
<span class="glyphicon glyphicon-pencil"></span>
</button>
$(document).on("click", ".updateUser", function(){
$('tr td:nth-child(2)').each(function () {
var html = $(this).html();
var input = $('<input type="text" />');
input.val(html);
$(this).html(input);
});
});
EDIT - HTML CODE
<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>"PHP Dynamic ID "</td>
<td>"PHP Dynamic Username "</td>
<td>"PHP Dynamic Password "</td>
<td>"PHP Dynamic Role "</td>
<td>
<button type="button" class="updateUser btn btn-primary btn-xs" data-userId="<?php echo $id; ?>">
<span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
<td>
<button class="deleteUser btn btn-danger btn-xs" type="button" data-userId="<?php echo $id; ?>">
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
</tbody>
</table>
3 answers
Answer question0
It's selecting every row because that's exactly what $('tr td:nth-child(2)') is telling it to do.
I'm also not a huge fan of binding delegated events on 'document' unnecessarily; it makes your handlers run way too often just to check if you clicked on something relevant.
It's better to bind the event closer to the relevant tags -- either on the edit button itself (and then traverse upwards to find the desired table row) or on the table (as shown here, in case you need to add rows programmatically and don't want to have to rebind individual events to new rows.)
(Updated answer now that you've edited the question to show that you want to catch clicks on a button rather than on the entire row)
$('table').on('click', '.updateRow', function() {
var myTD = $(this).closest('tr').find('td:eq(1)'); // gets second table cell in the clicked row
// Now do whatever to myTD, such as:
$('td').removeClass('selected'); // remove any previous selections
myTD.addClass('selected');
});table {border-collapse:collapse}
td {border:1px solid}
.selected {background-color: red}
.updateRow {color: #00F; text-decoration:underline}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td class="updateRow">Edit:</td><td>A </td><td>B </td><td>C </td><td>Easy as</td></tr>
<tr><td class="updateRow">Edit:</td><td>One </td><td>Two</td><td>Three </td><td>Or simple as</td></tr>
<tr><td class="updateRow">Edit:</td><td>do </td><td>re </td><td>me </td><td>baby</td></tr>
<tr><td class="updateRow">Edit:</td><td>That's</td><td>how</td><td>simple</td><td>love can be</td></tr>
</table>0
The below code consider all the rows.
$('tr td:nth-child(2)')
Instead of this you need to consider the row belongs to the button clicked. This can be done closest selector. Below is the code
$(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);
});
});
0
You could find the parent container of your edit button (the td), find the parent of that (the tr) and get the element you need from there by selecting a numbered child. For example;
$('.updateUser').click(function(){
var name_td = $(this).parents().eq(1).children().eq(1);
// This gets the parent (the tr), then the second child (the send td). Eq is 0 based.
})