首页 > 编程札记 > 编程

JQuery表格处理（对表格指定行列数据的处理）（实现表中每行的平均值）

阅读：评论：0

通过实验熟练掌握使用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;/*合并边框线用 style="border-collapse: collapse"（不推荐在h5使用，h5向下兼容） cellspacing:单元格于单元格之间的间隙距离，当cellspacing=0，只会使单元格间隙为0，但不会合并边框线*/
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)");
//添加第8列存放平均成绩
var $td = $('<td></td>');
$tr.append($td);
//核心问题
//遍历第1行之后的行
$('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 
//toFIxed(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>

//预留问题 .val与.text的区别

//2019-05-25

本文发布于:2024-02-04 15:28:52，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170710546956703.html

上一篇：SQL Server 产品销售数据库设计与实现

下一篇：HTML5 使用JQuery对表格进行增加列操作