highlight table row - javascript

I have following table structure
<table>
<tbody>
<tr>
<td>Lorem</td> <td>Ipsum</td> <td>Fierent</td>
</tr>
<tr>
<td>Lorem ipsum</td> <td>pro ut tale erant</td> <td>mnesarchum ne</td>
</tr>
<tr>
<td >mnesarchum ne </td> <td >sapientem</td> <td >fierent mnesarchum </td>
</tr>
</tbody>
</table>
Now, I want to highlight the row, on which mouse is hovering?
So, I have 2 questions:
How can I achieve highlight row affect on above mentioned table structure?
How can I revert back the highlight effect, when row don't have move hovering over it?
I am using jQuery 1.4+, so please suggest me way to achieve the following using jQuery code.
I have create jsfiddle for the same: http://jsfiddle.net/c9h5w/
Thanks.

I'd add a classname to the row that is currently being hovered. You can then use CSS to style every table cell within this row with a certain background color, for example. Removing the styling is simply a matter of triggering a mouseout event and removing the classname.
CSS:
.hovered td {
background: #ddd;
}
JavaScript:
$('table tr').mouseover(function() {
$(this).addClass('hovered');
}).mouseout(function() {
$(this).removeClass('hovered');
});
Live example.

Check-it Out:
$("table tr").hover(
function(){
$(this).css("background-color","#FFEFC6");
//$(this).addClass('className'); //if ur working with class
},
function(){
$(this).css("background-color","");
//$(this).removeClass('className'); //if ur working with class
}
);
CLICK HERE TO SEE THE DEMO

Related

select and unselect td inside an HTML table

I have a table in my website that I want to be able to select one cell and the background color change, then select another cell (not in the same row) and have the first cell go back to the default color while the newly selected cell change background color. I've looked around and can only seem to find stuff that I've already got or something about a bunch of checkboxes. I have a Fiddle here.
Here's my CSS:
.selected {
background-color: rgba(0,0,0,0.4) !important;
color: #fff;
}
Here's my jquery:
<script type='text/javascript'>//<![CDATA[
$("#table2 td").click(function ()
{
$(this).toggleClass('selected').siblings().removeClass('selected');
});
//]]>
</script>
<script type='text/javascript'>//<![CDATA[
$("#table tr").click(function ()
{
$(this).toggleClass('selected').siblings().removeClass('selected');
});
//]]>
</script>
Here's my HTML:
<body>
<table id='table'>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>Second Row</td>
<td>Still Second Row</td>
</tr>
</table>
<br><br>
<table id='table2'>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>Second Row</td>
<td>Still Second Row</td>
</tr>
</tbody>
</table>
</body>
I can get table to work fine selecting and unselecting rows, but table2 doesn't work correctly. I select a cell in one row and then select a cell in the same row and it works, but if I select a cell in another row it does not change the first cell back to the default color. The fiddle above shows what is happening.
I tried adding a <tbody>, but I don't think that I did it correctly as the results did not change.
I tried adding $('.selected').removeClass('selected'); and it partly worked. I can select a cell in one row then select a cell in another row and the background colors change correctly, but if I select the first cell a second time it does not unselect.
The way you select siblings for td is wrong, Try this
$("#table2 tbody td").click(function ()
{
$(this).closest('table').find('td').not(this).removeClass('selected');
$(this).toggleClass('selected');
});
Fiddle
It's not performing as you want in table2 because you're calling the .sibling() method, but expecting it to change elements that aren't siblings. The td's in this row:
<tr>
<td>January</td>
<td>$100</td>
</tr>
are not siblings of the ones in this row:
<tr>
<td>Second Row</td>
<td>Still Second Row</td>
</tr>
Adjust your code inside your click event to something like:
$(this).closest('table').find('td').not(this).removeClass('selected');
You can wrap your header row in <thead></thead> tags and the body rows in <tbody></tbody> tags and then use:
$("#table tbody tr, #table2 tbody tr").click(function() {
$(this).siblings().removeClass('selected').end().addBack().toggleClass('selected');
});
jsFiddle example
Create a css style for the style of your selected cell.
Then toggle that style for each situation (clicked / not clicked) and remove the 'selected' class from the rest of the cells.
CSS
.selected {
color: rgb(252, 69, 69);
}
In Jquery when cell is selected ...
$(function(){
$('body').on('click','table tr',function(e){
e.preventDefault();
$(this).toggleClass('selected').siblings().removeClass('selected');
});
});

getting nth-child of parent

I have a table where I need the first two cells of every row clickable (NOT the entire row). When I click the first or the seccond cell, I want to get the value of the third cell of that same row.
To clarify, when I press a1 I want the alert to show c1, If I press b2 I want it to show c2 and If I press c3 I dont want anything to happen.
As you can see, my alert($(this).parent(':nth-child(3)').text()); doesn't work.. how can I achieve this?
$('td:nth-child(-n+2)').on("click", function(){
alert($(this).parent(':nth-child(3)').text()); //Doesn't work
});
td{
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr>
<td>a1</td>
<td>b1</td>
<td>c1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
</tr>
</table>
you need to use .closest('tr') .. to select parent tr and .find() to select td:nth-child(3)
$('td:nth-child(-n+2)').on("click", function(){
alert($(this).closest('tr').find('td:nth-child(3)').text());
});
Working Demo
Use this
$(this).parent().children(':nth-child(3)').text()
Select the parent and then a child of it.
JsFiddle
You can use
$('td:lt(2)').on("click", function () {
alert($(this).parent().find("td:eq(2)").text()); //Doesn't work
});
Fiddle
lt(2) will get the specified elements whose index is less than 2
eq(2) will select the element whose index is equal to 2
This work for me:
$('table tr').each(function(){
$(this).find('td:lt(2)').on("click", function () {
var text = $(this).parent().find("td:eq(2)").text();
console.log(text);
});
});

Select element if contains text

I can't get this one to work and I can't find any similar question that does the same what I want.
I have a table with rows like this:
<div class="gui-table">
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><p class="customfields">Size</p></td>
<td></td>
</tr>
//etc...
I want to check if all the second cells have the text "size" in it! If so then hide the third td.
So what I thought what would work is this:
$('.gui-table tr').each(function(){
if ($('td:nth-child(2) .customfields:contains("Size")').length > 0) {
$(this).css('visibillity', 'hidden');
}
});
This doesn't work! Does anybody see what is wrong with this?
Just do:
$('.gui-table .customfields:contains("Size")').css('visibility', 'hidden');
Fiddle: http://jsfiddle.net/cfmrngcc/2/
Assuming I understand your question correctly the following should do it:
$('.gui-table p.customfields:contains("Size")').parent().next().hide();
td { border: 1px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gui-table">
<table>
<tr>
<td></td>
<td></td>
<td>Shown</td>
</tr>
<tr>
<td></td>
<td><p class="customfields">Size</p></td>
<td>Hidden</td>
</tr>
</table>
</div>
This will hide the next table cell after any table cell containing a p tag with the text Size.
It works by finding the P tags containing size inside the gui-table - $('.gui-table p.customfields:contains("Size")')
Then using .parent() to select it's parent table cell.
And finally .next() and .hide() to select the next table cell and hide it.
I banged around on this and came up with this JSFiddle that should get you going again. The essential function is much like you started with but modified like this:
function doItNow(e)
{
$('.gui-table tr').each(function ()
{
$('td:nth-child(2) .customfields:contains("Size")').each(function ()
{
$(this).parents('tr').children('td:nth-child(3)').css('visibility', 'hidden');
});
});
}
Note that the inner each() is passing the paragraph element and not the cell element. So I traversed up the parents() chain until I find the row and hide the 3rd child. You might be able to code this without the inner each but I am too lazy to be that complicated!
If you only want to hide the third column, when there is the word 'size' in the second one you can do this in that way:
$('.gui-table td:nth-child(2):contains("Size")').next().css('visibility', 'hidden');
Here is a jsfiddle:
http://jsfiddle.net/0qczvak5/
The explanation:
Select all elements with the class name .gui-table, select all second tds with td:nth-child(2), filter them with :contains("Size"). Now you have all second tds with the word "Size" and with .next() you get the following cell (the third one) and you hide it with .css('visibility', 'hidden').
$(".gui-table tr td:nth-child(2)").each(
function (index,tag){
if ($(tag).find("p").text() == "Size")
$(tag).css('visibility', 'hidden');
}
)
This is will work .

JQuery hover out two div

I have two HTML table row, When I hover first tr I want to show this and second tr and when mouse will be out of both tr second tr must be a hide.
How Can I do this using JQuery?
<tr class="pr_td_main pr1">
<td>123</td>
<td>15</td>
</tr>
<tr class="pr_td_desc pr1">
<td colspan="3">description</td>
<td colspan="2">123<br />456</td>
</tr>
Question is very confusing. Do you want the _desc to show when you mouse over the _main?
If that's the case you can do:
$(".pr_td_main").mouseover(function(){
$(this).next(".pr_td_desc").show();
});
And to hide it when user moves his mouse out:
$(".pr_td_desc").mouseleave(function(){
$(this).hide(); //hide this tr
});

jquery remove table row

I'm having a problem removing a table row, I can highlight the row red but when I try to remove it the slideup function messes up. I have wrapped them in a div but I don't no how to access the children of the tr and then the children of that?
$('#test tr:not(:first)').click(function()
{
$(this).css("background-color","red");
$(this).children("td div").slideUp(function()
{
$(this).parent().remove();
});
});
The problem is this line:
$(this).children("td div").slideUp(function()
I also tried
$(this).children("td").children("div").slideUp(function()
The slide up only removes the first column.
<table border="1" width="600" cellspacing="0" cellpadding="0" id="test">
<tr>
<td><b>First Name</b></td>
<td><b>Last Name</b></td>
<td><b>Address</b></td>
<td><b>Town</b></td>
</tr>
<tr>
<td><div>First Name</td>
<td>Last Name</td>
<td>Address</td>
<td>Town</div></td>
</tr>
</table>
Do I need to wrap the content of each <td> with a div tag?
Thanks
Calling children("td div") will find all direct children that match the selector. (all children which are <div>s that happen to be inside of <td>s)
Since all of the direct children are <td>s, it won't match anything.
Calling children("td").children("div") will find all <div>s inside of all <td>s.
It will thus find the only <div> you have there.
EDIT: You can use jQuery to create wrapper elements; see my blog post:
$('#test tr:not(:first)').click(function() {
$(this).css("background-color","red");
$(this).children().wrapInner('<div>').children().slideUp(function() {
$(this).closest('tr').remove();
});
});
Demo

Categories