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.
Related
Is there a way to select the TR with 2 TD's in it?
I want to achieve it using pure css. I will use jQuery or javascript, but i want to make sure that this is absolutely not possible using plain CSS before moving to jQuery
For example in jQuery, you have
$("tr").each(function(){
if($(this).children().find("td").length==2){
$(this).css({some properties});
}
})
Can something similar to this be achieved using CSS?
You cannot select a parent based on the number of children it has in css, you can only apply styles to nodes based on their siblings. So this is not feasible in your case.
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 would like to add an inline style to the last LI that is generated with the ASP:repeater control.
I can't add a css class, i need to some how count the last li with the class called:
class="tile lower-boxes icon_email"
If I've understood your question, then the following should work for you:
$(".tile.lower-boxes.icon_email:last").css("color", "#C00");
Obviously, that selector and the CSS method can be changed to your needs. You can also add a class to the element, which would be preferable:
$(".tile.lower-boxes.icon_email:last").addClass("foo");
More info on the :last selector.
Jquery has a last function that will let you choose it functionally.
$('li.tile').last()
or you can use the :last selector
$('li.tile:last')
Edit: Fix Bad link
we can also use jQuery :last Selector..
e.g:
$("li:last").css('background-color', 'yellow');
I know the question is quite old but thought it might be helpful for others ..
Suppose my gridview has a few rows and every row has a few textboxes. I want to iterate the gridview with JavaScript to read the value of each textbox. How easily can I achieve it by plain JavaScript or jQuery? I want a cross browser solution.
Definitely use jQuery. I use a couple of different jQuery selectors below. This should give you a general idea of how to accomplish your goal.
$('#gridviewId').find('.textClass').each(function () { alert($(this).val()) });
The above code would use the grid view's id and then would find all of the descendant elements with a particular class (in your case textboxes) alerting their value. I've added a working example at: http://jsfiddle.net/GWAAC/.
use jQuery. If you know the class or ID of the elements you need, a simple selector will return all of them
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)