Say I have the following table:
<table width=200 border=1>
<tr>
<th>Ignore</th>
<th>Highlight</th>
<th>Ignore</th>
</tr>
<tr>
<td>yep</td>
<td>yep</td>
<td>yep</td>
</tr>
<tr>
<td>yep</td>
<td>yep</td>
<td>yep</td>
</tr>
</table>
and I want to highlight all Highlight columns. How do I do this based on the header text?
I realise it can be achieved by selecting the n'th child, but what to future proof it against likely column order changes.
$('body > table > tbody > tr > td:nth-child(2)').css('background-color', 'pink');
http://jsfiddle.net/8XSLF/
You need to get index of th has Highlight text. So use :contains() selector to selecting it and then use .index() to finding index of it. At the end, select every th and td has index equal to finded index.
Note that the :contains() selector select also element has unwanted text like Highlighted and Text Highlighted. If your table text isn't constant, use .filter() instead.
var i = $("table th:contains('Highlight')").index();
$("table tr th, table tr td").filter(function(){
return $(this).index() == i;
}).css("background", "pink");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table width=200 border=1>
<tr>
<th>Ignore</th>
<th>Highlight</th>
<th>Ignore</th>
</tr>
<tr>
<td>yep</td>
<td>yep</td>
<td>yep</td>
</tr>
<tr>
<td>yep</td>
<td>yep</td>
<td>yep</td>
</tr>
</table>
Since you specified column name won't change, you can use jQuery.contains:
$( "body > table > tbody > tr > td:contains('Highlight')" ).css('background-color', 'pink');
Needed this highlighted in multiple tables: final solution
$("th:contains('Highlight')").each(function() {
$(this).closest('table').find('td:nth-child(' + ($(this).index() + 1) +')').css('background-color', 'pink');
});
Related
I am trying to apply a css style to change color of clicked rows of an HTML table. On the click event, I am adding the class (selected-row). Now, my table has a sorting functionality when clicking on the heading of each column. The heading gets colored which is not what I want. I want only rows but not the heading. So, I changed my style to (not first child). Now, the heading AND first row don't get color changed. I need only the heading to NOT change color and all other rows to change color when I add selected-row class.
.selected-row:not(:first-child) {
background-color: brown;
color: #FFF;
}
$("#example tr").click(function () {
$(this).addClass('selected-row').siblings().removeClass('selected-row');
});
If you mark up your table with a <thead> to contain the header row, and <tbody> to contain the data rows, you can specifically target only rows in the table body - like this in CSS:
tbody > tr { }
And like this in jQuery:
$('#example tbody > tr')...
Table mark-up:
<table>
<caption>This table contains...</caption>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td>$50</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Item 1</td>
<td>$20</td>
</tr>
<tr>
<td>Item 2</td>
<td>$30</td>
</tr>
</tbody>
</table>
One way to potentially do it would be to wrap your table header in <thead></thead> and body in <tbody></tbody> and then apply whatever selector as
$("#example tbody tr").click(function () {...});
You can target "td" tags:
$("#example tr td").click(function () {
$(this).parent().addClass('selectedrow').siblings().removeClass('selected-row');
If you are using "th" tags in your table:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
If you don't want to modify your header using the th or tbody tags, you could do something like this.
$("table tr:gt(0)").click(function(){
$(this).siblings().removeClass('selected-row');
$(this).addClass('selected-row');
})
You can see this working in this jsfiddle
Use th for the header row element.
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/
I have a table. Always multiple row in the table contain a attribute like selectrow="selectrow". For example 3rd and 4th row have selectrow="selectrow" attribute. Now i want to find out the index of last row that have selectrow="selectrow" attribute. I do not want to use each. I search for solution like this :
$("table > tbody > tr[selectrow='selectrow']:last-child").index();
This is html:
<table>
<tbody>
<tr >
</tr>
<tr>
</tr>
<tr selectrow="selectrow">
</tr>
<tr selectrow="selectrow">
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
In this example i want to get 4.
Try this : use :last which will give you last of the matched selection. :last-child will select the last child of table and try to match the other selection criteria (selectrow='selectrow' in your case) and when match not found then it will retrun -1.
$("table > tbody > tr[selectrow='selectrow']:last").index();
JSfiddle Demo
More Information on
:last
:last-child
Try this
$("table > tbody > tr[selectrow='selectrow']").last();
it will return the object of last tr.
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();
I have table that is filled with dynamic content from a query from a database on the backend. I want to hide any tr that contains only zeros.
Here is what my table looks like:
<table id="table1" " cellspacing="0" style="width: 800px">
<thead id="tablehead">
</thead>
<tbody id="tabledata">
<tr class="odd">
<td>0</td>
<td>0</td>
<td>0</td>
<td>0.00%</td>
<td>0.00%</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
</tr>
</tbody>
Now if the first three td's in tbody are == 0 then I would like to add a class to the tr that will effectively hide that row. How would I go about doing this using jQuery?
EDIT:
Sorry forgot to add what I have tried. The following is a test script I tried to see if I could collect all the td's
$(document).ready(function() {
$("#table1 td").filter(function() {
return $(this).text == 0;
}).css("text-color", "red");
});
You can do this :
$('tr').each(function(){
var tr = $(this);
if (tr.find('td:eq(0)').text()=="0"
&& tr.find('td:eq(1)').text()=="0"
&& tr.find('td:eq(2)').text()=="0"
) tr.addClass('hidden');
});
Demonstration (the hidden class changes the color to red, it's clearer...)
Depending on your need, you might have to trim the texts, or to parse them.
For more complex tests, you might find useful to work directly with an array of the cell contents. You can get it using
var celltexts = tr.find('td').map(function(){return $(this).text()}).toArray();