Develop Reference

Highlight Table Rows in Multiple tables on hover

I have three tables, all side by side to allow for an overflow.
I need the table rows on all three tables to be linked so when it is hovered on one table that row is highlighted throughout all the tables.
Would really appreciate any help.
Example:
<table class="one" width="33.3%">
<tr>
<td>Example</td>
</tr>
</table>
<table class="two" width="33.3%">
<tr>
<td>Example</td>
</tr>
</table>
<table class="three" width="33.3%">
<tr>
<td>Example</td>
</tr>
</table>

You could use jquery's hover method in combination with nth-child selectors.
$("#parentDiv table tr").hover(function(){
// on enter
var childNum = $(this).index() + 1;
$('#parentDiv table tr:nth-child('+childNum+')').css("background-color", "pink");
}, function(){
// on leave
var childNum = $(this).index() + 1;
$('#parentDiv table tr:nth-child('+childNum+')').css("background-color", "white");
});
Change #parentDiv to whatever you have as a common parent element for the tables you need highlighted.
Example: https://jsfiddle.net/z7r8oc57/

how to limit closest() to traverse only one row

I have a table on which if I click any row it is supposed to return the row "id" number.I have used closest() function.But the issue is the closest() selects all the "tr" below it. Is there any way to limit the function to traverse only one row data.
For example my table
<tr id="0">
<td>data0</td>
</tr>
<tr id="1">
<td>data1</td>
</tr>
<tr id="2">
<td>data2</td>
</tr>
<tr id="3">
<td>data3</td>
</tr>
<tr id="4">
<td>data4</td>
</tr>
If I click the third row that is id=2, it should return only that individual id and td(data2).
This is the code that I am trying as for now.
$("#myTable tr").click(function(){
trid = $(this).closest('tr').attr('id');
alert(trid);
return trid;
});
I have tried using next() or find() but I end up getting the Undefined error.Thanks.

I think you have misunderstood the concept of .closest(). It traverses up to the parents upward, while .find() traverses downwards to the children/grandchildren.
So as per your code it seems that you want to have the id of the clicked element. then you can just do this:
trid = this.id;
as in your code this refers to the tr you are clicking on.
Note:
Just noticed that you are using a global var named trid because it does not have the var keyword. So if you have accidently used it then you can add var trid like this in the above code.

$(document).on('click', 'td', function() {
var result = $(this).closest('tr').attr('id');
alert(result);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr id="0">
<td>data0</td>
</tr>
<tr id="1">
<td>data1</td>
</tr>
<tr id="2">
<td>data2</td>
</tr>
<tr id="3">
<td>data3</td>
</tr>
<tr id="4">
<td>data4</td>
</tr>
</table>

Try this
$("#myTable tr").click(function(){
trid = $(this).attr('id');
alert(trid);
//if you want to get to the td of it
var tdVal = $(this).find('td').html();
});

by clicking on tr, you do not need to use .closest() to access its id, just get its id using the .attr('id')or .prop('id') or even simply .id as follows:
$("#myTable tr").click(function(){
trid = $(this).attr('id');
alert(trid);
});

how to get first table row "<td></td>" text which are visible using jquery

Here I have a table
<table id="table">
<thead>
<tr>
<th>Name</th>
<th>Course</th>
</tr>
</thead>
<tbody>
<tr style="display:none">
<td>jones</td>
<td>.net</td>
</tr>
<tr style="display:none">
<td>James</td>
<td>SAP</td>
</tr>
<tr>
<td>Charles</td>
<td>Java</td>
</tr>
</tbody>
</table>
I want to get text of first row first td text which are visible using jquery, by
above table, I want result as "Charles".
How can get it. I have tried like
$("#table").closest('tbody').children('tr:first').find('td:first').text()
but not getting result.how can I?

Try to use :visible selector to get the visible rows,
$("#table tbody tr:visible:first td:first").text()

To get the visible one use the according :visible selector that jquery ships:
$('#table > tbody > tr:visible:first > td:first').text();

This is Worked for Me.
$('#table> tbody > tr:visible').first().find('td').first().text();

index of tr with tds only --- relative to click

How do I get the index of the <tr> in the table but only if it has <td>s and not <th>s
If I use a click event below it will alert the index of the with td and th but I only want <tr> with <td>s
thanks
$('td').click(function(){
var s = $(this).parents('table tr:has(td)').index();////// returns
alert(s);
});
<table>
<tr>
<th><th><th><th><th><th><th><th><th><th>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
</table>

Try this...
$('td').click(function(){
if ( ! $(this).closest('table').find('th').length ) {
var s = $(this).closest('tr').index();
alert(parseInt(s) + 1);
}
});​
JS FIDDLE LINK

Your given code is working properly. see this jsfiddle.

How to move table row in jQuery?

Say I had links with up/down arrows for moving a table row up or down in order. What would be the most straightforward way to move that row up or down one position (using jQuery)?
There doesn't seem to be any direct way to do this using jQuery's built in methods, and after selecting the row with jQuery, I haven't found a way to then move it. Also, in my case, making the rows draggable (which I have done with a plugin previously) isn't an option.

You could also do something pretty simple with the adjustable up/down..
given your links have a class of up or down you can wire this up in the click handler of the links. This is also under the assumption that the links are within each row of the grid.
$(document).ready(function(){
$(".up,.down").click(function(){
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
});
});
HTML:
<table>
<tr>
<td>One</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Two</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Three</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Four</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Five</td>
<td>
Up
Down
</td>
</tr>
</table>
Demo - JsFiddle

$(document).ready(function () {
$(".up,.down").click(function () {
var $element = this;
var row = $($element).parents("tr:first");
if($(this).is('.up')){
row.insertBefore(row.prev());
}
else{
row.insertAfter(row.next());
}
});
});
Try using JSFiddle