This may sound like a simple question, but I just cannot seem to find an answer on google, probably because the search term will bring back quite a lot of irrelevance.
I would like a jQuery selector to select all odd table rows, that are not in <thead> and apply a css class to them all.
table.cp-ss-grid tr:odd
The above selector will bring back all odd rows in the table correctly, but will include the thead rows (on ie)
How would I in the selector do an and, i.e. something like:
table.cp-ss-grid tr:odd:not(thead)
the above doesn't work and still brings back the thead rows
Any ideas?
An AND selector for jQuery would be for example: .classA.classB
This would select elements which have classA and classB.
Why not do:
$('table.cp-ss-grid > tbody > tr:odd');
To explicitly select the body rows? All browsers will add a tbody for you if you don't have one.
if you use th to head and td to other rows ,
you can check that the have child of td,
.children('td')
table.cp-ss-grid tr:odd select all the odd rowb which will not include the header
if you want to specify a color of the header use :nth-child(n)
Related
I've noticed that when I create a table with rows and stuff, chrome likes to automatically add a tbody element in between. Firefox also creates it but doesn't put the content inside it so it just kinda floats there.
Anyways, I'm dynamically adding rows to a table via js. Should I respect the browsers affinity for tbody and make the script add the children there instead of the table element?
Browsers automatically add tbody element to table if you didn't do it explicitly. A table may have single thead, single tfoot, and many tbody elements. Generally, a problem may occur when you use table>tr or (if you add several tbody tags explicitly) table tr:nth-child() selector.
Trying to get the first cell in a row by using first-child or nth-child, but the syntax isn't playing nice. This is what I'm trying and it isn't working:
....
sections[key][2][sections[key][2].length-1] //Table Row
$(sections[key][2][sections[key][2].length-1]+":first-child") //Should be first cell of row
....
Instead it returns the entire document...
Your selector:
$(sections[key][2][sections[key][2].length-1]+":first-child")
is attempting to concatenate a JavaScript object with a string, which will result in (something similar) [object HTMLTableRowElement]:first-child which, obviously, is not going to produce a jQuery object, or a DOM node.
Given that (you say) $(sections[key][2][sections[key][2].length-1] is the tr element (though why you're using that notation within a jQuery selector is a mystery to me), I'd suggest:
$(sections[key][2][sections[key][2].length-1]).find('td:first-child');
JS Fiddle demo.
Note the use of the td with the :first-child pseudo-class, in order to prevent selecting the first-child of all subsequent elements.
However, to get the first cell of all table-rows (using jQuery's more understandable notation) I'd suggest:
$('table tr td:first-child')
JS Fiddle demo.
Or, to use :nth-child() to get an arbitrarily-numbered td:
$('table tr td:nth-child(2)')
JS Fiddle demo.
Should be:
$(sections[key][2][sections[key][2].length-1]+" td:first-child")
If you just want to return the first child regardless, why don't you do:
sections[key][2][sections[key][2].length-1].firstChild
Do keep in mind that selecting via jQuery what you can get very easily via DOM is just slowing down your code for no good reason.
I have been able to select the specific rows that I wanted but I can't select specific td from those tr.
I used this to select rows:
$('#time-slot tr:not(:first, :last)')
then within those selected rows I was trying to ignore the first and the last td but it is not working. I used similar approach as above
$('#time-slot tr:not(:first, :last) td:not(:first, :last)')
Any ideas how should I approach this problem. Btw I am trying to click and drag the mouse to paint the cells with user defined color.
I prefer using less of a string selector and more of the jQuery methods, as well as using the :first-child and :last-child selectors for your problem:
$("#time-slot").find("tr").not(":first-child, :last-child").find("td").not(":first-child, :last-child").addClass("active");
http://jsfiddle.net/7b4Ms/
Depending on what you are expecting, which you haven't explained very well, this may or may not be what you want. What this does is select all tr elements that are not the first and last. Inside of those matched tr elements, it selects all td elements that are not first and last. So basically, it doesn't select the outside ring of cells in the table.
Totally agree with Ian, just I prefer to use .children() instead of .find(). Because it can make a problem if you have nested tables.
$("#time-slot").find("tr").not(":first-child, :last-child").find("td").not(":first-child, :last-child").addClass("active");
changes to:
$("#time-slot").children("tr").not(":first-child, :last-child").children("td").not(":first-child, :last-child").addClass("active");
Try this (uses css selectors only):
$("#time-slot tr:not(:first,:last) td:not(:first-child,:last-child)").addClass("active");
Sample
I have an empty table in my code like so:
<table id='rostertable'></table>
When I add a <tr> using jQuery's append function, then according to my chrome inspector, my table looks like this:
<table id='rostertable'><tbody><tr>...</tr></tbody></table>
It seems like the tbody got added by itself, and this causes problems later when I'm traversing the DOM.
For consistency's sake, I figured it would be better if I added the tbody myself and appended directly to it. Is this possible? I tried making my placeholder <table id='rostertable'><tbody></tbody></table> but the jQuery selector $('#rostertable tbody') returns null and my chrome inspector doesn't show the tbody tags either.
Edit: Never mind, it ended up being an unrelated bug in my javascript. At one point I was clearing out the contents of the table and running $("#rostertable").html(""), which of course deleted the tbody. I accepted the first valid answer to this question.
You should not get null, if no element matches the selector still you will get object containing zero elements.
Your selector is returning tbody and you might be using some wrong method.
Live Demo
alert($('#rostertable tbody').html());
To append to the tbdoy your code should work as long as you append valid html.
The below works ok:
$('#rostertable tbody').append('<tr><td>new row - cell 1</td><td>new row - cell 2</td></tr>');
DEMO
You need to make sure you append a <td> as well as the <tr>. For example in Chrome, the following will simple add an empty <tr>
$('#rostertable tbody').append('<tr>no cells added, just row</tr>');
Alternating Row in HTML table Using jQuery with out tocuhing the existing code.
hope this will help you
$(document).ready(function() {
$('#Students > tbody > tr:odd').css("background-color", "green");
});
Since the question is tagged with jQuery, I guess a jQuery solution would work.
You can use the element selector for jQuery, and select all tr elements - $("tr").
Then you can use the appropriate method or methods, to do what you want to do with it.
.css() to change some styling
.hide() to hide it,
.animate() to apply some animation to it and so forth.
To name a few...
One example would be:
$("tr").css("color", "#ccc"); // Change the font color
To get more specific code, you will have to clarify your question and describe what you want to do with the table rows.