jquery代码实现一个3列6行的表格,第一列标头是序号,第二列标头是姓名,第三列标头是分数,隔行添加背景颜色,低于60分的标红
以下是使用jQuery代码创建一个3列6行的表格,并根据要求添加背景颜色和标红:
<!DOCTYPE html> <html> <head> <title>Table Example</title> <style> .table { border-collapse: collapse; width: 100%; } .table th, .table td { border: 1px solid black; padding: 8px; text-align: center; } .table th { background-color: #f2f2f2; } .table tr:nth-child(even) { background-color: #dddddd; } .table .red { color: red; } </style> </head> <body> <table class="table"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>分数</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td class="red">59</td> </tr> <tr> <td>2</td> <td>李四</td> <td>78</td> </tr> <tr> <td>3</td> <td>王五</td> <td class="red">55</td> </tr> <tr> <td>4</td> <td>赵六</td> <td>92</td> </tr> <tr> <td>5</td> <td>钱七</td> <td>80</td> </tr> <tr> <td>6</td> <td>孙八</td> <td class="red">45</td> </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $('.table tr:even').addClass('even'); $('.table td').each(function() { if ($(this).text() < 60) { $(this).addClass('red'); } }); }); </script> </body> </html>
在上述代码中,我们使用了CSS样式来设置表格的样式,包括边框、内边距、背景颜色等。然后使用jQuery选择器和方法来选中表格的行和单元格,并添加相应的类名来实现隔行添加背景颜色和标红。
如果您的问题还未解决可以联系站长付费协助。
有问题可以加入技术QQ群一起交流学习
本站vip会员 请加入无忧模板网 VIP群(50604020) PS:加入时备注用户名或昵称
普通注册会员或访客 请加入无忧模板网 技术交流群(50604130)
客服微信号:15898888535
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若内容侵犯了原著者的合法权益,可联系站长删除。