通过实验熟练掌握使用jQuery及其DOM操作。
要求：
掌握jQuery的查找器； 掌握jQuery事件使用； 掌握jQuery DOM操作； 1.设计数据表格页面
2.增加一列“平均成绩”，显示每个学生的三门课的平均成绩，保留一位小数点；
3.把身为党员，且平均成绩>87分的女同学数据行使用红色背景标注。
4.页面结果如下：
head
/table表格的style属性/
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<style>
table {
border-collapse: collapse;
margin: auto;
height: 300px;
width: 600px;
text-align: center;
}
</style>
</head>
body:/示例用表格/
<body>
<table border="1">
<tr style="background-color: lightgray;">
<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 class="grade">87
</td>
<td class="grade">83
</td>
<td class="grade">94
</td>
</tr>
<tr>
<td>13310320713
</td>
<td>王楠
</td>
<td>女
</td>
<td><input type="checkbox" checked/></td>
<td class="grade">84
</td>
<td class="grade">85
</td>
<td class="grade">93
</td>
</tr>
<tr>
<td>13310320714
</td>
<td>杨佳敏
</td>
<td>女
</td>
<td><input type="checkbox" /></td>
<td class="grade">88
</td>
<td class="grade">89
</td>
<td class="grade">96
</td>
</tr>
<tr>
<td>13310320715
</td>
<td>李茂杨
</td>
<td>男
</td>
<td><input type="checkbox" checked/></td>
<td class="grade">82
</td>
<td class="grade">84
</td>
<td class="grade">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 核心内容
<script src="js/jquery-2.1.0.js"></script>
<script>
$(function() {
var $tr0 = $("tr:first");
var $th = $('<th>平均成绩</th>');
$tr0.append($th);
var $tr = $("tr:gt(0)");
var $td = $('<td></td>');
$tr.append($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>
//预留问题 .val与.text的区别
//2019-05-25
