HTML5 使用JQuery对表格进行操作
1.设计数据表格页面； 2增加一列“平均成绩”，显示每个学生的三门课的平均成绩，保留一位小数点； 3.把身为党员，且平均成绩>87分的女同学数据行使用红色背景标注。
style样式代码:
<style>
table {
text-align: center;
margin: auto;
border-collapse: collapse;
height: 300px;
width: 600px;
}
</style>
主体部分代码:
<body>
<table border="1">
<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;
$(this).find('td:eq(7)').text(Avg_Grade.toFixed(1));
if(Avg_Grade.toFixed(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>
代码效果:
