HTML5 使用JQuery对表格进行增加列操作

最新推荐文章于 2021-06-17 06:41:12 发布

阿紫.

最新推荐文章于 2021-06-17 06:41:12 发布

阅读量3.2k

点赞数 5

分类专栏： HTML 文章标签： HTML5 JQuery 表格

本文链接：https://blog.csdn.net/weixin_42303681/article/details/90552959

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML5 使用JQuery对表格进行操作

1.设计数据表格页面；
2增加一列“平均成绩”，显示每个学生的三门课的平均成绩，保留一位小数点；
3.把身为党员，且平均成绩>87分的女同学数据行使用红色背景标注。

style样式代码:

<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(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>

代码效果:

阿紫.

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
HTML5 使用JQuery对表格进行增加列操作

HTML5 使用JQuery对表格进行增加列操作1.设计数据表格页面；2增加一列“平均成绩”，显示每个学生的三门课的平均成绩，保留一位小数点；3.把身为党员，且平均成绩>87分的女同学数据行使用红色背景标注style样式代码: table { text-align: center;/*文本居中，即表格中的文字内容居中*/ margin: auto;/*将整个表格居中...
复制链接

扫一扫