I am trying to control a specific column of a table using jQuery.
I would like to select the next or the previous td contained in the column number 5 starting, for istance, from the second one and change the related text or css properties of the adjecent ones.
$(document).ready(function() {
$('table.pl_res_game tr td:nth-child(5)').eq(0).addClass('change');
The column can contains 3 or more than 100 td. I tried to use the method next() and previous
$('table.pl_res_game tr td:nth-child(5)').eq(0).next();
but I could not select the adjacent ones.
This is the example:
FIDDLE
I would like to select all td contained in the column number 5
In this case you just need to remove eq(0) from your current code, as that is restricting the selection to the first td found:
$('table.pl_res_game tr td:nth-child(5)').addClass('change');
Example fiddle
I would like to select the next or the previous td
In this case use prev() and next() to find it:
var $td = $('table.pl_res_game tr td:eq(1)');
$td.next().add($td.prev()).addClass('direct-sibling');
Example fiddle
to select elements form next row
$('table.pl_res_game tr td:nth-child(5)').eq(0).closest('tr')
.next()
.find('td:nth-child(5)').css({'background-color':'green','color':'#fff'});
FIDDLE
jsut use prev to select previous td of same row
$('table.pl_res_game tr td:nth-child(5)').prev()
.eq(0)
.css({'background-color':'green','color':'#fff'});
FIDDLE
try modifing the index of the eq() like in the sample below:
$('table.pl_res_game tr td:nth-child(5)').eq(1).css({'background-color':'green','color':'#fff'});
$('table.pl_res_game tr td:nth-child(5)').eq(2).css({'background-color':'green','color':'#fff'});
and so on
You can then use a for loop for the range you want to select:
$(document).ready(function() {
for (var i=0;i<3;i++){
$('table.pl_res_game tr td:nth-child(5)').eq(i).css({'background-color':'green','color':'#fff'});
}
});
JSFIDDLE
Related
Please check the fiddle link
http://jsfiddle.net/mv7Y5/89/
am trying to achieve to toggle the table row by clicking the td,
which is not happening please help needed.
$(function() {
$(".details").hide();
$('.show-details').click(function(e) {
$(this).next("tr").slideToggle(500);
});
});
You are calling next() on the td that gets clicked (on the first cell, anyway). What next() does is it finds the nearest sibling of the element in question that matches the selector. There is no tr that is a sibling of the td that gets clicked. You need to make sure that you're calling next() on the tr, so it can find the next tr:
$(function() {
$(".details").hide();
$('td.show-details').click(function(e) {
$(this).parent().next("tr").slideToggle(500);
});
});
Additionally, your markup in that jsfiddle is a little screwy (you've got an inconsistent number of columns in your rows, for example, which I believe may be the result of some typos.)
In your first row, you have the class name "show-details" on the "td". On the subsequent rows, the class name is on the "tr" elements. Since you are using ".next()" to find a "tr", the class should be on the "tr" as in the second, third and forth rows.
<tr class='rowToClick'><td>click me</td></tr>
Next, this should work:
$(document).ready(function()
{
$(".rowToClick").click(function() { $(this).nextUntil(".rowToClick").toggle(); });
});
I know I can get the number of rows in an HTML table with the following jQuery:
var rows= $('#myTable tbody tr').length;
However, how can I get the number of rows that have a given class (e.g., <tr class="MyClass>). How can I count the number of rows in a table with a class of "MyClass"?
Simply add the class to the selector
var rows= $('#myTable tbody tr.MyClass').length;
No need to overqualify so this would work too
var rows= $('#myTable tbody .MyClass').length;
As Adam said use .class-name selector.
For further examples see other jquery selectors
Just change your jQuery to check for instances of the class.
var rows = $('.MyClass').length;
Here's a jsfiddle example: http://jsfiddle.net/Ma7pz/
I need some jquery code to style all empty child tds only if the first td contains no text.
Right now my code styles all empty TDs as a greyish color (see image).
I only want the first row to be styled because the first TD contains text. In other words, I need to test if the first TD contains text and if so, add the grayish color on that row, if it is blank then don't add the coloring to the empty TDs.
jsbin for the above code:
http://jsbin.com/ojemuf/1/edit
Select rows, check if first child not is empty, get its matching siblings:
$('tr td:first-child:empty').siblings("td[class*='_crew']:empty").css("background", "#DDCEC0");
$('tr td:first-child:not(:empty)').siblings("td[class*='_crew']:empty").css("background", "#DDCEC0");
Apparently I had it backwards!
I hope I'm understanding your question right
loop trough the tr elements and if the first is not empty add a color to the empty td's inside the tr element
$('tr').each(function () {
if(!$(this).find('td').first().is(':empty'))
$(this).find('td:empty').css('background', '#ccc');
});
--- edit ---
Reversed edition of Mathletics
$('tr td:first-child').not(':empty').siblings("td[class*='_crew']:empty").css("background", "#DDCEC0");
The question is a bit unclear whether you want to update the entire table when the first element is not empty or if you want to update every matching row. For the entire table, you can try this:
$("td:first:not(:empty)")
.closest("table")
.find("td[class*='_crew']:empty")
.css("background", "#DDCEC0");
From the description, it seems the other answers missed the fact that he wants this applied when the first element is NOT empty.
How can I hide a entire table column with jQuery?
I managed to hide a single td, but not the other 2 tds under it. Code to hide table td:
$("#td_maand").hide();
Give all the same column tds the same class, then $(".columnClass").hide();
e.g.
<tr><td class="firstcolumn"></td><td class="secondcolumn"></td></tr>
<tr><td class="firstcolumn"></td><td class="secondcolumn"></td></tr>
<tr><td class="firstcolumn"></td><td class="secondcolumn"></td></tr>
<script>$(".firstcolumn").hide();</script>
You can use the nth-child selector to achieve that, use it like this:
$('#yourtable tr td:nth-child(3)').hide();
that will hide your third column.
You can do it easily:
var i = [your_column_index];
$('td:nth-child(' + i + ')').hide();
You can use
$(this) // assuming this points to a td
.closest('tbody') // find closest tbody (container)
.find('> tr > td:nth-child('+$(this).index()+')') // find all td in the same column
.hide(); // hide them
Demo at http://jsfiddle.net/jFv6d/
(it hides the clicked column)
try $("#td_maand").parent().hide();
How can I quickly get a jQuery selector for the textboxes in the the first 5 rows of a table? I have a table with many rows and many textboxes; I'm just trying to select the textboxes in the first 5 rows of the table. Is there an easy way to do this?
Use lt()
$('tr:lt(5) input[type=text]')
Note that it's lt(5), not lt(6), since the indexes are 0-based.
try:
$("#yourTable tr:lt(5) input[type=text]")
see "http://docs.jquery.com/Selectors/nthChild#index"
try width:
$("table tbody tr:nth-child(0)").html();
$("table tbody tr:nth-child(1)").html();
$("table tbody tr:nth-child(2)").html();
$("table tbody tr:nth-child(3)").html();
$("table tbody tr:nth-child(4)").html();