|
When we represent some data in a grid view
|
Suppose we need two alternative colors
Using jQuery we can do this very easily.
Take example of the following table
<table id="grid" border="1">
</table> <table border="1"> </table>
<script type="text/javascript">
$(document).ready(function(){
$("#grid tr:even").css("background-color", "#dedede");
$("#grid tr:odd").css("background-color", "#ffffff");
});
</script>
If you want to set different set of alternative colors for both table then just give different ids to the table and use it.
Here I use grid1 and grid2 as ids for two tables.
<table id="grid1" border="1">
</table> <table id="grid2" </table>
<script type="text/javascript">
$(document).ready(function(){
$("#grid1 tr:even").css("background-color", "#dedede");
$("#grid1 tr:odd").css("background-color", "#ffffff");
$("#gri2 tr:even").css("background-color", "#bbbbff");
$("#grid2 tr:odd").css("background-color", "#ffffff");
});
</script>
If you want to use css class for every alternative row then you have to
<script type="text/javascript">
$(document).ready(function(){
$("#grid tr:even").addClass('classEven');
$("#grid tr:odd").addClass('classOdd');
});
</script> |
如何通过jQuery实现网格中的行的颜…
最新推荐文章于 2022-02-04 01:28:34 发布