📜  如何使用 jQuery 创建斑马条纹表格效果?

📅  最后修改于: 2021-11-03 10:10:30             🧑  作者: Mango

给定一个带有表格的 HTML 文档,任务是使用 jQuery 在表格上创建 Zebra Stripes 表格效果。

方法:要实现斑马条纹表格效果,请使用以下代码片段:

$(function() {
    $("table tr:nth-child(odd)").addClass("zebrastripe");
});

在上面的函数, zebrastripe是使用的类名, odd表示奇数行将具有彩色条纹。

要更改偶数行条纹,只需使用:

$(function() {
    $("table tr:nth-child(even)").addClass("zebrastripe");
})

在上述方法的以下演示中, jQuery-3.5.1.js包含源代码。

示例:下面是上述方法的演示。

HTML

  

    jQuery Zebra Stripes Demonstration
  
    
  
    
  
    

  

    

        GeeksforGeeks     

                                                                                                                                                                                                                                                                                                                                                               
IDCoursePrice
1Fork CPPFree
2DSA2499
3Fork JavaFree
5Linux599
6Fork PythonFree
  


输出:

上述演示的输出