jsp隔行变色 jQuery隔行变色与普通JS写法的对比？
jQuery隔行变色与普通JS写法的对比？
第一行表示表的直接子元素tr是交错的
如果tr外有tbody和其他标记，则tr不会变色
第二行表示表中的所有tr都是交错的
之前，在制作页面显示列表时，必须对一组数据进行交错变色。当时，我不知道，我用了很多JS脚本来判断，写了很多类似下面的例子。HTML代码//循环获取列表//循环结束后，使用CSS控制。直接弹出背景-颜色：表达式( 这个.rowIndex%2==0？“一种颜色”：“另一种颜色”光标：手}这样，如果你想显示上面的样式，你只需要写：HTML代码//loop得到列表//loop结束，CSS版本只适用于较低版本ie，表达式会死机，如果页面非常复杂。它不像以前在两个类之间切换的简单方法那样可靠。在高级浏览器中，cssselector（流行的JS库基本上实现了一个集合）：tr:nth child（2n1）/*奇数行*/tr:nth child（odd）/*奇数行*/tr:nth child（2n1）/*奇数行*/tr:nth child（2n1）0）/*偶行*/tr:nth child（event）/*偶行*/jQuery版本：jQuery也是非常简单。1定义两个类来实现$（“tr:event”）。Addclass（“偶数行”）$（“tr:odd”）。Addclass（“奇数行”）2。或一行代码$（“tr”）。每个函数（I）{此样式背景色[“#ccc”，“#fff”][I%2]}）表格控件：让CSS类以不同的方式显示表格的奇偶行好吧，这件事并不复杂。在HTML文件中，编写一个基本表元素，并将边框宽度设置为1px。
2. 打开浏览器并检查浏览器中的效果。你可以看到目前没有什么风格。这是一张简单的桌子。
3. 使用CSS代码给表格添加样式，将其设置为显示在中间，单元格的宽度将变长，高度将增加。
4. 再次打开浏览器以查看效果。您可以看到表格的样式很漂亮，显示信息也很清晰。
5. 在CSS代码中，使用第n个子方法来区分表中每行的奇数和偶数，奇数和偶数列被赋予不同的颜色。
6. 打开浏览器刷新页面，可以看到表格已经达到了交错变色的效果。以上步骤就是为了实现这个功能。
版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。
