1.设计数据表格页面；
2增加一列“平均成绩”，显示每个学生的三门课的平均成绩，保留一位小数点；
3.把身为党员，且平均成绩>87分的女同学数据行使用红色背景标注。
<style>table {text-align: center;/*文本居中，即表格中的文字内容居中*/margin: auto;/*将整个表格居中*/border-collapse: collapse;/*合并边框线用*//*cellspacing为单元格之间的距离，当值为0时，使距离为0单不会合并边框线*/height: 300px;width: 600px;}</style>
<body><table border="1"><!--有边框，无边框时赋值为0--><tr style="background-color: lightgrey;"><th>学号</th><th>姓名</th><th>性别</th><th>党员</th><th>高等数学</th><th>大学英语</th><th>计算机文化基础</th></tr><tr><td>13310320712</td><td>陈中华</td><td>男</td><td><input type="checkbox" checked></td><td>87</td><td>83</td><td>94</td></tr><tr><td>13310320713</td><td>王楠</td><td>女</td><td><input type="checkbox" checked></td><td>84</td><td>85</td><td>93</td></tr><tr><td>13310320714</td><td>杨佳敏</td><td>女</td><td><input type="checkbox"></td><td>88</td><td>89</td><td>96</td></tr><tr><td>13310320715</td><td>李茂杨</td><td>男</td><td><input type="checkbox" checked></td><td>82</td><td>84</td><td>93</td></tr><tr><td>13310320716</td><td>赵家伟</td><td>男</td><td><input type="checkbox"></td><td>79</td><td>82</td><td>90</td></tr><tr><td>13310320717</td><td>张思琪</td><td>女</td><td><input type="checkbox" checked></td><td>94</td><td>82</td><td>90</td></tr></table><script src="js/jquery-2.1.0.js"></script><script>$(function() {var $tr0 = $("tr:first");//筛选表格第一行$tr0.append($('<th>平均成绩</th>'));//添加平均成绩列var $tr1 = $("tr:gt(0)");//筛选第一行之后的行$tr1.append('<td></td>');//遍历第一行之后的行$('tr:gt(0)').each(function(key) {var Avg_Grade = (Number($(this).find('td:eq(4)').text()) + Number($(this).find('td:eq(5)').text()) + Number($(this).find('td:eq(6)').text()))/3;//Number转换JQuery对象为number类型//在遍历的情况下遍历列，实现对指定数据的处理//正确使用this find//toFlexed（n）保留n位小数$(this).find('td:eq(7)').text(Fixed(1)); //判断条件 if(Fixed(1)>87&&$(this).find('td:eq(2)').text()=='女'){if($(this).find('td:eq(3) input').prop("checked") == true)//复选框是否选中判断$(this).attr("style","background-color:indianred ");//对指定行改变属性的值}});});</script></body>
本文发布于:2024-02-04 15:28:58，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170710549856704.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
