JS实现隔行换色

最新推荐文章于 2025-04-15 10:44:14 发布
原创 最新推荐文章于 2025-04-15 10:44:14 发布 · 2.8k 阅读 · 5 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
JS

当前文章被收录于：

JS
14 篇文章 0 人学习
订阅专栏 查看详情
本文介绍了如何使用JavaScript实现HTML表格的隔行换色功能。通过获取表格的行元素并利用for循环，根据行数的奇偶性设置不同的背景颜色，达到视觉效果的提升。代码示例中展示了具体的实现过程。

JS实现隔行换色

一、步骤分析

1、设计好表格页面

2、通过获取标签的方式如：

                            var arr= document.getElementsByTagName("tr"); //返回数组

3、通过循环的方式遍历数组：

                                    a、当为奇数时为一颜色

                                    b、当为偶数时为一颜色

二、代码练习

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隔行换色</title>
<script>
function  chanclo(){
//获取标签
var arr= document.getElementsByTagName("tr");
//for循环实现换色
for(i=1;i<arr.length;i++){
//如果行数为偶数，背景颜色变为红色
if(i%2==0){
 arr[i].style.backgroundColor="red";
}
//如果行数为奇数，背景颜色变为金色
else{
arr[i].style.backgroundColor="gold";
}
}
}
</script>
</head>
<body   onload="chanclo()">
   <table align="center"  border="1" width="300px" height="300px">
     <tr >
         <th>星期一</th>
          <th>星期二</th>
           <th>星期三</th>
     </tr>
      <tr>
         <td>语文</td>
          <td>数学</td>
           <td>英语</td>
     </tr>
      <tr>
         <td>语文</td>
          <td>数学</td>
           <td>英语</td>
     </tr>
      <tr>
         <td>语文</td>
          <td>数学</td>
           <td>英语</td>
     </tr>
   </table>
</body>
</html>

三、结果展示：

备注：由于个人原因，本博客暂停更新。如有问题可联系本人，本人提供技术指导、学习方向、学习路线。本人微信wlp1156107728(添加注明来意)   QQ1156107728(添加注明来意)

别再手动筛变量了！用Python的statsmodels实现逐步回归，5分钟搞定特征选择
最新发布
weixin_33726318的博客
05-08 504
本文介绍了如何使用Python的statsmodels库实现逐步回归，快速完成特征选择。通过前向选择、后向消除等方法，结合调整后R方、AIC和BIC等核心指标，5分钟内即可自动化筛选最优特征组合，提升模型性能。特别适合中等规模数据集的特征选择需求。
JS中实现表格的隔行换色
鹿杖客的博客
01-16 4199
思路:1.首先需要自己设计一张表格 2.得到每一行的对象(数组) 3.通过遍历,奇数则color,偶数则color &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;全选全不选
基于js实现隔行换色。
nowchange的博客
05-24 1075
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; ...
用PHP和JS分别实现隔行换色
倾城一笑
12-01 2406
1.PHP实现隔行换色 <?php /*隔行换色,标签可以居中*/ echo ""; for($i=1;$i<=8;$i++) { //$color=($i%2==0)?"red":"green"; switch ($i%3) { case 0: $color="red"; break;
JavaScript 实现表格隔行换色与增删功能
2503_91259466的博客
04-15 922
下面是一个完整的实现方案，包含以下功能：点击"添加"按钮添加新行点击"删除"按钮删除当前行自动实现隔行换色效果删除后自动重新排序序号。
利用JavaScript实现表格隔行换色
weixin_39232706的博客
03-22 407
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格隔行换色</title> <script> window.onload = function(){ ...
JS隔行换色和全选的实现
Rick的博客
03-22 365
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 1. 确定事件: 文档加载完成 onload 2. 事件要触发函数: init() 3. 函数:操作页面的元素 要操作表格中...
html中用js实现的表格隔行换色
周先森爱编程丶的博客
09-16 7351
写的时候把自己的表//写的时候把自己的表的table加上id="tbl" <table id="tbl">代码如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格隔行换色</title> <script> window.onload = fun
java css隔行变色_JS+CSS实现Li列表隔行换色效果的方法
weixin_30620121的博客
02-26 230
本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法。分享给大家供大家参考。具体实现方法如下：CSS+Js实现Li列表隔行换色效果.mytable {border-collapse:collapse;border:solid #6AA70B;border-width:0px 0 0 0px;width:50%;}.mytable ul li {padding-top:5px;text-inde...
JS实现表单隔行换色，鼠标移入高亮
御晨风而归
04-11 1904
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } div...
js实现表格隔行换色
SqlloveSyn的博客
12-27 1146
js实现表格隔行换色
用js实现隔行换色
weixin_72636650的博客
05-12 383
首先要想的是，点击添加行的时候会新增一个tr标签，里面是内容，其次就是换过行之后，要判断是否要换颜色，隔一行就换颜色，所以可以用i % 2 == 1去判定是否需要换颜色，里面有具体的解释。
【JS学习总结】如何使用JS实现表格隔行换色
ghscarecrow的博客
08-21 1177
前言：这个系列主要是对之前学习JavaScript实现的一些小demo的总结，总觉得不能这样学过了就算了，趁着假期就好好总结一下吧。 在平常的网站开发中，我们常常会遇到需要实现表格隔行换色这个需求，那么，这种效果要怎样才能够实现呢？ 首先，我们先来分析一下，实现这种需求，我们可以先获取到表格中每一行的元素，然后再根据每一行的下标来判断这一行应该使用哪一种颜色，也就是说要进行一个奇偶性判断，然后...
放弃class与js实现隔行换色效果
courseware的专栏
12-02 587
其实也是挺"傻"的方法，利用了CSS2 - 相邻选择符 制作的效果。要不是新出的IE7支持该选择符，俺还木敢发出来呢~ 隔行换色示例: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 放弃class与js实现隔行换色效果 table {border-collapse:collapse;border:solid #99
使用JavaScript实现表格隔行换色
05-03 263
完整代码： 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>JS实现表单隔行换色</title> 7 8 <sc...
js实现隔行换色
taokai的专栏
01-22 1468
http://www.w3.org/TR/html4/strict.dtd">     js实现隔行换色---阿会楠练习作品（为我所写，非我所想）     window.onload = function(){    var tr_ = document.getElementById("myTable").getElementsByTagName("tr");    for(var i = 0;i
如何用JS实现表格隔行换色功能
2301_79420857的博客
11-02 304
以上就是如何用JS实现表格隔行换色功能。
html中p标签隔行换色,javascript和Css实现隔行换色的几种方法
weixin_33623304的博客
06-29 1034
隔行换色通常用在列表页中，目的是让用户看的清楚每一行，通常有几种方法实现。1、使用bgcolor属性2、平铺背景图片3、CSS类定义4、纯CSS打造5、js实现第一种：也是最基本的，使用bgcolor属性[code][/code]也可在程序中动态输出bgcolor中的值。第二种，平铺图片，使用一张隔行换色的图片作为背景图片[code][/code]这种方法有一个缺点就是：表...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值