<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
<title>jQuery表格编程</title>
<style>
table {
margin: 0 auto;
font-size: 12px;
color: #333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table th {
background-color: #dedede;
}
table th,
table td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
}
table td {
text-align: center;
}
.bkColorRed {
background-color: lightcoral;
}
</style>
</head>
<body>
<table id="dataTable">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>党员</th>
<th>高等数学</th>
<th>大学英语</th>
<th>计算机文化基础</th>
</tr>
</thead>
<tbody>
<tr>
<td>13310320712</td>
<td>陈中华</td>
<td>男</td>
<td><input type="checkbox" name="partymember" checked></td>
<td>87</td>
<td>83</td>
<td>94</td>
</tr>
<tr>
<td>13310320713</td>
<td>王楠</td>
<td>女</td>
<td><input type="checkbox" name="partymember" checked></td>
<td>84</td>
<td>85</td>
<td>93</td>
</tr>
<tr>
<td>13310320714</td>
<td>杨佳敏</td>
<td>女</td>
<td><input type="checkbox" name="partymember"></td>
<td>88</td>
<td>89</td>
<td>96</td>
</tr>
<tr>
<td>13310320715</td>
<td>李茂杨</td>
<td>男</td>
<td><input type="checkbox" name="partymember" checked></td>
<td>82</td>
<td>84</td>
<td>93</td>
</tr>
<tr>
<td>13310320716</td>
<td>赵家伟</td>
<td>男</td>
<td><input type="checkbox" name="partymember"></td>
<td>79</td>
<td>82</td>
<td>90</td>
</tr>
<tr>
<td>13310320717</td>
<td>张思琪</td>
<td>女</td>
<td><input type="checkbox" name="partymember" checked></td>
<td>94</td>
<td>82</td>
<td>90</td>
</tr>
</tbody>
</table>
<script>
//新建一个节点，<td></td>，追加到节点<thead></thead>
var thead= document.querySelector('thead');
var tr = thead.querySelector('tr');
var para = ateElement('th')
para.innerText='平均分';
tr.appendChild(para);
//2.为tbody里面的每一个tr追加一列<<td></td>,同时计算平均分赋予<td></td>
var tbody = document.querySelector('tbody');
var trs = tbody.querySelectorAll('tr');
for(var i = 0;i<=trs.length;i++){
//求和
var tds = trs[i].querySelectorAll('td');
var sum = 0;
for (var j=4;j<=6;j++)
sum += parseInt(tds[j].innerText);
// console.log(sum);
var para = ateElement('td');
para.innerText=parseInt(sum/3);
trs[i].appendChild(para);
var sex = tds[2].innerText;
var dy = tds[3].querySelector('input').checked;
if(sex=='女' && dy==true && parseInt(sum/3)>=87)
trs[i].style.backgroundColor = 'crimson';
}
</script>
</body>
</html>
本文发布于:2024-02-04 15:29:14，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170710555356706.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
