Develop Reference

How to find adjacent td of a speicifc column of a table

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

JQuery Table Toggle Row issue

I have table which is being dynamically created.
I would like to try not to have any more attributes in the table (like an ID field).
It is a multilevel table where all the TableRows should be expandable and collapse on click in any of the TD in each row.
$('.fylke_click').click(function () {
$(this).parent().nextUntil('.fylke').slideToggle(0);
$('.sted').hide();
});
$('.kom_click').click(function () {
$(this).parent().nextUntil('.kommune').slideToggle(0);
});
See this simplified fiddle:
http://jsfiddle.net/T2Lwn/
So it's basically 3 levels and it is a lot of problems here.
One obvious one is when you are on the second level, which is called "kommune" and if you click on the last TR it removes the "fylke" underneath. As you can see if you click on "MIDTRE GAULDAL"
This is probably because I use .Parent() and I need some sort of if check if I am on the last row?
Is it also other problems with this code? Can I specify the click method class="fylke_click" and class="kom_click" on a more general level?
For example for all <tr class="fylke"> each TD class will have class="fylke_click" and same for kommunne?

If I understand your issue correctly this may help:
Demo Fiddle:
Since you said you're going to be dynamically creating this content, I would recommend delegating off of the main table instead of making a click handler for each row. Also, since all of the stuff you want to show / hide are siblings and not nested, things get a bit tricky. You'll need to be specific with your .nextUntil() by passing a filter, and I found a :not() on the filter was necessary.
Again, since these are all siblings, it's not as easy as hiding the children of the header row, so I set up an "open" class to check if the header was open or not, and hid / showed stuff depending on if it was already open.
JS:
$('.kommune').hide();
$('.sted').hide();
$('.table').on('click', 'tr', function(){
$this = $(this);
if( $this.hasClass('fylke') ){
if ( $this.hasClass('open') ) {
$this.toggleClass('open').nextUntil('.fylke', 'tr').hide();
}
else {
$this.toggleClass('open').nextUntil('.fylke', 'tr:not(.sted)').toggle();
}
}
else if ( $this.hasClass('kommune') ){
$this.nextUntil('.kommune', 'tr:not(.fylke)').toggle();
}
});

jQuery: Style all empty child TDs only if the first (:first) TD contains no text (:empty)

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 to remove entire tr when a keyword is contained within a specific td

Inside a number of <tr>'s in my document there are 7 classes, each one sometimes has a corresponding class name (i.e. sub, id, assigned, sub, sub, status, and one classless "td"). Within the td class = "status" lies a span class defined as either
<span class = "statusBox">Passed</span>
or
<span class = "statusBox">Failed</span>.
If the text contained within the span class is "Passed", I need to delete the entire <tr>. If it's failed it stays on the document. How can I achieve this?
My first attempt was through a call such as:
function() {
if ($('tr td span.statusBox').html() == "Passed"){
$('tr td span.statusBox').hide();
}
But this removed every instance of only the phrase "Passed", not the entire <tr>.
I've also tried
$("tr td span.statusBox:contains('Passed')").each(function(){
$(this).css("visibility","hidden");
});
I feel like this is more along the right path, but I can't seem to get it to work.

You were close: find the status box with the word 'Passed' and then find the closest ancestor tr element and remove it from the DOM:
$("tr td span.statusBox").filter(":contains('Passed')").each(function(){
$(this).closest('tr').remove();
});
Since the :contains operator is a jQuery extension (it has been deprecated from the CSS spec), it's faster to break the selector into two parts. The first is finding all spans of class statusBox, this will look up the elements using native browser methods. Then those elements are filtered using the :contains operator (which may have a native implementation or may be implemented in jQuery, depending on the browser).

It is because you are altering the visibility of the span instead of the parent <tr>. You can use $(this).closest('tr') to get to the row element and then alter its visibility.
$("tr td span.statusBox:contains('Passed')").each(function(){
$(this).closest('tr').css("visibility","hidden");
});

$(".statusBox").each(function (i, e) {
if ($(e).text() == "Passed") {
$(e).closest('tr').hide();
}
});
http://jsfiddle.net/B7Wqy/

Update background color of table row using jquery

I used the following jquery to load an external html page into a div named content:
$(document).ready(function(){
$("#content").load("content.html");
});
(function($) {
$(function() {
$('.load_link').click(function() {
$("#content").load("content2.html");
return false;
});
});
})(jQuery);
The link (using <a class="load_link">) that triggers the change of content is within a row in a table. I'd like to be able to update the class assigned to a row of a table when someone clicks a link. The row that contains the link clicked should be assigned the class "rowselected" and all other rows (in that table only) should be assigned the class "rownotselected". Only rows in this table use those class names so it should be safe to replace any occurrence of that class name.
It this possible? I'm using jquery for the very first time.
Thanks in advance for any advice!

How about:
$('.load_link').click(function() {
$("#content").load("content2.html");
var $row = $(this).closest("tr");
// find the parent <tr> and set the class
$row.removeClass("rownotselected").addClass("rowselected");
// Set the class of the other rows:
$row.siblings("tr").removeClass("rowselected").addClass("rownotselected");
return false;
});
Find the parent tr using closest()
Use removeClass and addClass to remove the appropriate classes
Using siblings() to find sibling rows in the current table.
Here's a working example: http://jsfiddle.net/andrewwhitaker/vN2ny/