Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
316 views
in Technique[技术] by (71.8m points)

html - What is the best way to style alternating rows in a table?

Obviously, the actual style of the odd/even rows will be done via a CSS class, but what is the best way to "attach" the class to the rows? Is is better to put it in the markup, or is it better to do it via client-side javascript? Which is better and why?

For simplicity's sake, let's assume that this is a large table, 100 rows, and that the color scheme is alternating odd/even rows. Additionally, some sort of javascript library that can easily do this is needed elsewhere in the page and so the overhead of that package is not a factor.


The real goal of this question is to determine what trade-offs are involved as well as how those trade-offs should be handled, such as performance hits to the server if the page is hit under load(assume a dynamic table), bandwidth hits for users with lower connection speeds, semantic hits by adding additional layout code to the HTML (The idea here is that HTML is for content, CSS is for layout, and javascript is for how the content behaves as well as controlling/augmenting the layout)

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You can do this fairly easily with jQuery, like so:

$(function(){
    $('tr:even').addClass('alternateClass');
    $('tr:odd').addClass('mainClass');
});

You can qualify the selector a bit more if you just want to do this on one particular table, or do it on 'li' elements as well.

I think this is a bit cleaner and more readable client-side than it would be in some server-side environments,


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...