JS——表格的隔行换色

1、不使用JS完成表格的隔行换色：

<html>
    <head>
        <meta charset="utf-8">
        <title>成绩登记表格</title>
    </head>

    <body>
        <table width="600" border="1"  align="center" cellpadding="5" cellspacing="3">
            <caption>成绩登记表</caption>
            <tr>
				<th bgcolor="blanchedalmond "align="middle" >序号</th>
				<th bgcolor="blanchedalmond "align="middle ">学号</th>
				<th bgcolor="blanchedalmond "align="middle ">姓名</th>
				<th bgcolor="blanchedalmond "align="middle ">平时成绩</th>
				<th bgcolor="blanchedalmond "align="middle ">期末成绩</td>
				<th bgcolor="blanchedalmond "align="middle ">学期总成绩</th>
            </tr>

			<tr>
				<td align="middle ">1</td>
				<td align="middle ">20100300201</td>
				<td align="middle ">张小丽</td>
				<td align="middle ">95</td>
				<td align="middle ">95</td>
				<td align="middle ">95</td>
			</tr>

			<tr>
				<td bgcolor="grey "align="middle ">2</td>
				<td bgcolor="grey "align="middle ">20100300202</td>
				<td bgcolor="grey "align="middle ">李宁</td>
				<td bgcolor="grey "align="middle ">90</td>
				<td bgcolor="grey "align="middle ">88</td>
				<td bgcolor="grey "align="middle ">89</td>
			</tr>

			<tr>
				<td align="middle ">3</td>
				<td align="middle ">20100300203</td>
				<td align="middle ">刘梅</td>
				<td align="middle ">98</td>
				<td align="middle ">92</td>
				<td align="middle ">95</td>
			</tr>

			<tr>
				<td bgcolor="grey "align="middle ">4</td>
				<td bgcolor="grey "align="middle ">20100300204</td>
				<td bgcolor="grey "align="middle ">王刚</td>
				<td bgcolor="grey "align="middle ">98</td>
				<td bgcolor="grey "align="middle ">90</td>
				<td bgcolor="grey "align="middle ">94</td>
			</tr>

			<tr>
				<td align="middle ">5</td>
				<td align="middle ">20100300205</td>
				<td align="middle ">郑军</td>
				<td align="middle ">90</td>
				<td align="middle ">85</td>
				<td align="middle ">87</td>
			</tr>

			<tr>
				<td bgcolor="grey "align="middle ">6</td>
				<td bgcolor="grey "align="middle ">20100300206</td>
				<td bgcolor="grey "align="middle ">杨波</td>
				<td bgcolor="grey "align="middle ">80</td>
				<td bgcolor="grey "align="middle ">80</td>
				<td bgcolor="grey "align="middle ">80</td>
			</tr>
        </table>
</body>
</html>

使用这种方法需要在每一行的每一个空格设置表格的颜色，实现过程相对比较繁琐。

2、具体实现细节：

（1）<thead>标签：显示表格的表头内容

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

（2）<tbody> 标签表格主体内容

<tbody>
            <tr>
                <td align="middle ">1</td>
                <td align="middle ">20100300201</td>
                <td align="middle ">张小丽</td>
                <td align="middle ">95</td>
                <td align="middle ">95</td>
                <td align="middle ">95</td>
            </tr>

            <tr>
                <td align="middle ">2</td>
                <td align="middle ">20100300202</td>
                <td align="middle ">李宁</td>
                <td align="middle ">90</td>
                <td align="middle ">88</td>
                <td align="middle ">89</td>
            </tr>

            <tr>
                <td align="middle ">3</td>
                <td align="middle ">20100300203</td>
                <td align="middle ">刘梅</td>
                <td align="middle ">98</td>
                <td align="middle ">92</td>
                <td align="middle ">95</td>
            </tr>

            <tr>
                <td align="middle ">4</td>
                <td align="middle ">20100300204</td>
                <td align="middle ">王刚</td>
                <td align="middle ">98</td>
                <td align="middle ">90</td>
                <td align="middle ">94</td>
            </tr>

            <tr>
                <td align="middle ">5</td>
                <td align="middle ">20100300205</td>
                <td align="middle ">郑军</td>
                <td align="middle ">90</td>
                <td align="middle ">85</td>
                <td align="middle ">87</td>
            </tr>

            <tr>
                <td align="middle ">6</td>
                <td align="middle ">20100300206</td>
                <td align="middle ">杨波</td>
                <td align="middle ">80</td>
                <td align="middle ">80</td>
                <td align="middle ">80</td>
            </tr>

</tbody>

（3）函数部分：

<script>
            window.onload = function(){
                var tblEle = document.getElementById("tbl");
                var len = tblEle.tBodies[0].rows.length;
                for(var i=0;i<len;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;i<len;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 ">1</td>
                <td align="middle ">20100300201</td>
                <td align="middle ">张小丽</td>
                <td align="middle ">95</td>
                <td align="middle ">95</td>
                <td align="middle ">95</td>
            </tr>

            <tr>
                <td align="middle ">2</td>
                <td align="middle ">20100300202</td>
                <td align="middle ">李宁</td>
                <td align="middle ">90</td>
                <td align="middle ">88</td>
                <td align="middle ">89</td>
            </tr>

            <tr>
                <td align="middle ">3</td>
                <td align="middle ">20100300203</td>
                <td align="middle ">刘梅</td>
                <td align="middle ">98</td>
                <td align="middle ">92</td>
                <td align="middle ">95</td>
            </tr>

            <tr>
                <td align="middle ">4</td>
                <td align="middle ">20100300204</td>
                <td align="middle ">王刚</td>
                <td align="middle ">98</td>
                <td align="middle ">90</td>
                <td align="middle ">94</td>
            </tr>

            <tr>
                <td align="middle ">5</td>
                <td align="middle ">20100300205</td>
                <td align="middle ">郑军</td>
                <td align="middle ">90</td>
                <td align="middle ">85</td>
                <td align="middle ">87</td>
            </tr>

            <tr>
                <td align="middle ">6</td>
                <td align="middle ">20100300206</td>
                <td align="middle ">杨波</td>
                <td align="middle ">80</td>
                <td align="middle ">80</td>
                <td align="middle ">80</td>
            </tr>
        </tbody>
        </table>
</body>
</html>

原文地址：https://www.cnblogs.com/zhai1997/p/12229091.html

时间： 2024-08-01 17:47:28

JS——表格的隔行换色的相关文章

JS实现表格自动隔行换色

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>JS实现表格自动隔行换色丨石家庄冷风机|</TITLE> </HEAD> <BODY> <style> .t1 {background-color:#C8FC98;text-align:center} .t2 {backgro

JQ——选择器的应用（表格的隔行换色、全选和全不选）

1.表格的隔行换色: (1)核心代码: <script> $(function(){ $("tbody tr:even").css("background-color","red"); $("tbody tr:odd").css("background-color","yellowgreen"); }); </script> 获取tbody中的元素,并对奇数行和偶

Bootstrap3基础 table-striped 表格实现隔行换色（浅灰色与白色交替）

礼悟: 公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体. 虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜. ide:visual studio 2017 browser:Firefox / Chrome bootstrap:3.3.7 代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta

JavaScript表格的隔行换色开发

Html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>隔行换色</title> </head> <body> <table id="tab1" border="1" width="800" align="center" >

表格的隔行换色

jQuery代码: $(function(){ var item = $("tr"); for(var i=0;i<item.length;i++){ if(i%2==0){ item[i].style.backgroundColor="#888"; } } //

为了增强用户体验,快速识别行内容,一般都会在一些列表或者表格设置隔行换色~ 本人了解到的有两种常用的方法~ 1,利用CSS进行隔行换色 tr{ background: #E0F0FA;} tr:nth-child(2n){ background: white;} //规定属于其父元素的第2n(第偶数个)个子元素的每个 tr 的背景色 tr{ background-color: expression((this.sectionRowIndex % 2 == 0) ? "#E0F0FA"

08-JS中table隔行换色

JS中table隔行换色 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <table id="tab1" border="" cellspacing="" cellpaddi

jQuery实现的table表格隔行换色代码实例

jQuery实现的table表格隔行换色代码实例:下面是一段代码实例,能够实现隔行变色的效果,这是网站人性化措施之一,在实际应用中的使用非常广泛.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <t

表格隔行换色及删除后仍隔行换色效果（好别扭的标题。。。）

表格隔行换色,有多种写法,可以通过jquery来写,也可以用css3实现. 1.jquery方法 odd,奇数:even,偶数方法很简单 $("tr:odd").css({background:"#c66",color:"#fff"}); $('tr:even').css({background:"#fff",color:"#333"}); 但是如果删除后,两个一样背景的tr会挨上,怎么解决呢?可以将换行