jQuery: Zebra striped table - javascript

I have two table on page and I am trying to give it zebra strip effect. It works fines but for second table tr taking count from first table. Due to this even tr become the first tr.
Example of my work
http://jsfiddle.net/A9wpe/1/
code I am using for this is below:
$('table tr:even:not(:first)').css('background-color','#ededed');

Could always iterate through each table, acting on each independently:
$('table').each(function(){$(this).find('tr:even').css('background-color','#ededed')});
Or, if your users have recent browsers, you'd do this in CSS:
table tr:nth-child(even) {background-color: #ededed;}

Don't use jQuery for this. Use CSS instead
DEMO
.subPro-data tr:nth-child(even){
background-color : #ededed;
}
DEMO
With jQuery for old IE
.subPro-data tr.even{
background-color : #ededed;
}
and
$('.subPro-data tr:even').addClass('even');
Point is you want to avoid selectors like this $('table#{tableID1} tr:even:not(:first), table#{tableID2} tr:even:not(:first)'). Its a nightmare of inefficiency, and ultimately its so complicated only because you are using the following command: .css('background-color','#ededed');
Using .css adds those styles to the inline style attribute on the dom element. http://www.w3schools.com/css/css_howto.asp inline styles override almost all css rules. What you should be doing is just adding a class instead. That way the background color lives in a css rule and will naturally be in the right location in the css cascade.
This also means you can use a simple and sane selector like this $('.subPro-data tr:even').

Give id for both table and use jQuery below:
$('table#{tableID1} tr:even:not(:first), table#{tableID2} tr:even:not(:first)').css('background-color','#ededed');
Replace table id with {tableID1} and {tableID2}. See JSFiddle example.

$('table').each(function(index, value) { $(value).find('tr:even:not(:first)').css('background-color','#ededed');});

You can filter rows using :not(:first) and then apply nth-child(odd) rule.
check DEMO here
$('table tr:not(:first):nth-child(odd)').css('background-color','#ededed');

Related

Cannot style Jquery element using CSS

I have a Jquery selectmenu called #Main which implicitly gets a #Main-button. When I try to set #Main-button's width using css as
#Main-button {
width:200px;
}
it has no effect.
When I explicitly set
$( "#Main" ).selectmenu({ width:200})
it has the desired effect and under Firebug I see that it has appended a style="width:200" on the #Main-button, which is what I tried using CSS at the first place.
What is different? I've checked that the my CSS style sheet gets called AFTER the Jquery one, so there is no precedence issue
Also I notice that html elements turned to Jquery elements cannot be styled using CSS targeted at the specific element, even with the use of unique id's,but require the use of Jquery classes like .ui-menu etc
why do they behave differently? are there any specific styling gudilines when Jquery is involved?
In your CSS you've
#Main-button {
width:200px;
}
but the JS is adding dynamic inline style based on content. So it's having style attribute.
So in terms of CSS specificity their CSS beats you.
You must use !important in your rule to avoid overriding of your CSS.
#Main-button {
width:200px !important;
}
To style selectmenu or every jquery widget, you need to use jquery default classes. Your selector must be like
#Main-button.ui-selectmenu-menu li a
And also you can extend _renderItem and _renderMenu functions of selectmenu for different styling.

How to trigger bootstrap's mouseover effect programmatically

In twitter bootstrap, some elements get "greyed out" when the mouse hovers over them. This is true of buttons and linked list group items. Two examples are here: http://imgur.com/a/ABhkT#0
Can this effect be triggered programmatically? If so, how?
Yes, Using the 'onmouseover' attribute. It is quite similar to the 'onclick', except obviously for hovering instead.
Like the 'onclick', you will have to include a java script function that would change the css style for that element.
Depending on what you are trying to have this effect on, you could either put it right into the tag that is the object, or use <span></span>.
Ex:
<div onmouseover="fade()">
<p>text to fade</p>
</div>
Javascript:
function fade(){
code to change style
}
should be straight forward, this would fade everything inside the div (including the background)
Ok, I figured it out.
If the effect were being caused by a css class, one could simply apply the class to the element, like this:
$('<my_element>').addClass('bootstrapMouseoverGrey')
This doesn't work, though, because the effect isn't caused by a class. It's caused by a pseudoclass. Pseudoclasses can't be added programmatically.
One workaround is to create a new actual class with the exact same definition as the pseudoclass. In my case, the pseudoclass is a.list-group-item:hover, defined in bootstrap.css.
a.list-group-item:hover,
a.list-group-item:focus {
text-decoration: none;
background-color: #f5f5f5;
}
I edited bootstrap.css to make a new (actual) class, bootstrapMouseoverGrey, with the same definition as the pseudoclass.
a.list-group-item:hover,
a.list-group-item:focus,
.bootstrapMouseoverGrey {
text-decoration: none;
background-color: #f5f5f5;
}
Now, I can just add this class to an element using the line at the top of the answer. This gives me the result I want. Works like a charm!
Using jQuery:
var event = jQuery.Event('<event_name>');
event.stopPropagation();
$('<selector>').trigger(event);
Taken from the docs.

Mixing two css for different nav definitions

I have 2 css and both of them have specifications for nav
What would be the best way to use both of them?
The issue here is the second definition of nav has also a li definition that involves an id like
<li id="all">All</li>
This id I am using on a js.
I have this fiddle
Just use the :not operator in CSS and exclude the first nav from second nav css definition.
Add a class to firstNav, and then inside the css use :not like so
nav ul:not(.first)
Edit
Check the fiddle again. Seems like there is another trick to do this, something called a substring matching . Note that the order of the css in the fiddle is important. if you flip the definitions of the navs, the css will not work. I haven't tested this in IE 8, but based on what I read, it should work in IE8 as well.
Fiddle

bgcolor for alternative rows in a table dynamically using CSS

How to give two different bgcolor for alternative rows in a table dynamically using CSS.
I don't want to use jQuery for solving this problem.
Use :nth-child() pseudo class
tr:nth-child(odd){
background-color:green
}
tr:nth-child(even){
background-color:yellow
}​
DEMO
Here is few more selector example.
You can use the CSS3 nth-child selector:
tr:nth-child(odd)
Represents the odd rows of an HTML table.
Demo
Use :nth-of-type(n) pseudo class
as like this
tr:nth-of-type(2n){
background-color:green
}
tr:nth-of-type(2n-1){
background-color:yellow
}
Demo
More info click here

change table td border color by assigning class

I want to change border colors for certain parts of a table when a button is clicked. It's a bigger project, but I've been able to recreate the problem here -
http://jsfiddle.net/RZ7UP/8/
CSS:
table, tr, td
{
border:1px solid #999;
padding:8px;
border-collapse: collapse;
background-color: #FFF;
}
/*comment this line out and it works*/
#div1 table, #div1 td { border-color:White;}
.colorborder{border:1px solid Red}
​
The css style "table, tr, td" is in a css file used by all pages in the project. However, for this particular page, I don't want the black borders which is why I thought to add the style "#div1 table, #div1 td" (note that specifying "border:none" has the same effect). However, adding that makes the jquery manipulation stop working.
Anyone know what is going on?
This is an issue with css specificity. If you use your browser's DOM debugger, you'll see that the style #div1 td is taking precedence over .colorborder. This happens because an ID is more specific than a class.
Try changing your CSS to read:
#div1 td.colorborder{border:1px solid Red}
​
You can read w3.org's rules for computing specificity here. It's good to understand how this works if you're going to do any serious web development with CSS.
A quick introduction to CSS specificity
In general, here's what you need to know:
Element names (tag names like li and td) have the lowest specificity...
... followed by classes and attributes (like [name=firstname])...
... followed by IDs (like #div1)...
... with highest specificity going to the inline style="..." attribute.
In addition, higher specificity is given to multiple instances of the above. So if one style is assigned to table td and another is assigned to table tbody tr td, then the second style will win out because more tag names make it more specific.
Of course, you can bump things higher by using !important in CSS, but this really shouldn't be used except in special cases (for instance, you want something with class="red" to be colored red regardless of where you use it). Otherwise, you'll find yourself using it rampantly throughout your CSS, with one !important overriding another according to the rules of specificity, and it's just generally considered sloppy coding anyway.
This line:
#div1 table, #div1 td { border-color:White;}
Is referenced by an element's ID (#), which makes it's hierarchy heigher than any other plain class rule.
in order for other rules to work, you need to add the ID selector to them, so that they can override the previous rule's hierarchy.
#div1 .colorborder{border:1px solid Red}
You have a specificity problem, meaning that the selector that has the white color has more specificity than the red.
check now: http://jsfiddle.net/RZ7UP/12/
Your problem is in CSS I think not in jQuery.
last line of your css with ...
#div1 table.colorborder, #div1 td.colorborder{border:1px solid red}
Reason being is that #div1 an ID selector will take higher priority regardless if you have the .colorborder{...} further down the page...
That's because the ID has an higher specificity as the class
Changing
#div1 table, #div1 td { border-color:White;}
to
table#div1, td#div1 { border-color:White;}
works too.

Categories

Resources