JS——表格的隔行换色
2021-04-25 16:28
YPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
标签：aci 部分 pad add ima script 读取 显示 body
1、不使用JS完成表格的隔行换色：
成绩登记表格
| 序号 | 学号 | 姓名 | 平时成绩 | 期末成绩 | 学期总成绩 |
|---|---|---|---|---|---|
| 1 | 20100300201 | 张小丽 | 95 | 95 | 95 |
| 2 | 20100300202 | 李宁 | 90 | 88 | 89 |
| 3 | 20100300203 | 刘梅 | 98 | 92 | 95 |
| 4 | 20100300204 | 王刚 | 98 | 90 | 94 |
| 5 | 20100300205 | 郑军 | 90 | 85 | 87 |
| 6 | 20100300206 | 杨波 | 80 | 80 | 80 |
使用这种方法需要在每一行的每一个空格设置表格的颜色，实现过程相对比较繁琐。
2、具体实现细节：
（1）标签：显示表格的表头内容
（2）thead>
tr>
th align="middle" >序号th>
th align="middle ">学号th>
th align="middle ">姓名th>
th align="middle ">平时成绩th>
th align="middle ">期末成绩td>
th align="middle ">学期总成绩th>
tr>
thead>
tbody>
tr>
td align="middle ">1td>
td align="middle ">20100300201td>
td align="middle ">张小丽td>
td align="middle ">95td>
td align="middle ">95td>
td align="middle ">95td>
tr>
tr>
td align="middle ">2td>
td align="middle ">20100300202td>
td align="middle ">李宁td>
td align="middle ">90td>
td align="middle ">88td>
td align="middle ">89td>
tr>
tr>
td align="middle ">3td>
td align="middle ">20100300203td>
td align="middle ">刘梅td>
td align="middle ">98td>
td align="middle ">92td>
td align="middle ">95td>
tr>
tr>
td align="middle ">4td>
td align="middle ">20100300204td>
td align="middle ">王刚td>
td align="middle ">98td>
td align="middle ">90td>
td align="middle ">94td>
tr>
tr>
td align="middle ">5td>
td align="middle ">20100300205td>
td align="middle ">郑军td>
td align="middle ">90td>
td align="middle ">85td>
td align="middle ">87td>
tr>
tr>
td align="middle ">6td>
td align="middle ">20100300206td>
td align="middle ">杨波td>
td align="middle ">80td>
td align="middle ">80td>
td align="middle ">80td>
tr>
tbody>
（3）函数部分：
script>
window.onload = function(){
var tblEle = document.getElementById("tbl");
var len = tblEle.tBodies[0].rows.length;
for(var i=0;ilen;i++){
if(i%2==0){
tblEle.tBodies[0].rows[i].style.backgroundColor="red";
}else{
tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
}
}
}
script>
获取表格对象后从中读取表格主体的长度，对2取余来实现隔行变换颜色。
（4）显示效果：
3、完整代码：
html>
head>
meta charset="utf-8">
title>成绩登记表格title>
script>
window.onload = function(){
var tblEle = document.getElementById("tbl");
var len = tblEle.tBodies[0].rows.length;
for(var i=0;ilen;i++){
if(i%2==0){
tblEle.tBodies[0].rows[i].style.backgroundColor="red";
}else{
tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
}
}
}
script>
head>
body>
table width="600" border="1" align="center" cellpadding="5" cellspacing="3" id="tbl">
caption>成绩登记表caption>
thead>
tr>
th align="middle" >序号th>
th align="middle ">学号th>
th align="middle ">姓名th>
th align="middle ">平时成绩th>
th align="middle ">期末成绩td>
th align="middle ">学期总成绩th>
tr>
thead>
tbody>
tr>
td align="middle ">1td>
td align="middle ">20100300201td>
td align="middle ">张小丽td>
td align="middle ">95td>
td align="middle ">95td>
td align="middle ">95td>
tr>
tr>
td align="middle ">2td>
td align="middle ">20100300202td>
td align="middle ">李宁td>
td align="middle ">90td>
td align="middle ">88td>
td align="middle ">89td>
tr>
tr>
td align="middle ">3td>
td align="middle ">20100300203td>
td align="middle ">刘梅td>
td align="middle ">98td>
td align="middle ">92td>
td align="middle ">95td>
tr>
tr>
td align="middle ">4td>
td align="middle ">20100300204td>
td align="middle ">王刚td>
td align="middle ">98td>
td align="middle ">90td>
td align="middle ">94td>
tr>
tr>
td align="middle ">5td>
td align="middle ">20100300205td>
td align="middle ">郑军td>
td align="middle ">90td>
td align="middle ">85td>
td align="middle ">87td>
tr>
tr>
td align="middle ">6td>
td align="middle ">20100300206td>
td align="middle ">杨波td>
td align="middle ">80td>
td align="middle ">80td>
td align="middle ">80td>
tr>
tbody>
table>
body>
html>
JS——表格的隔行换色
标签：aci 部分 pad add ima script 读取 显示 body
原文地址：https://www.cnblogs.com/zhai1997/p/12229091.html
上一篇：org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)
下一篇：11-项目：JS实现轮播图特效