Dom实现table隔行换色

最新推荐文章于 2024-11-07 13:38:59 发布
最新推荐文章于 2024-11-07 13:38:59 发布
阅读量527 收藏
点赞数
文章标签： table xhtml javascript border html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/php_897721669/article/details/7299975
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>隔行换色</title>
<script language="javascript" type="text/javascript">


function changeColor(){
    var tab = document.getElementById("tab");
    var trs = tab.getElementsByTagName("tr");
    for (var i = 0; i < trs.length; i++) {   
        if (i%2 == 0) {   
            trs[i].style.backgroundColor = "#F0FFFF";  
        }else{
trs[i].style.backgroundColor = "#FFFFE0";  
}
    }   
}
</script>  


</script>
</head>


<body οnlοad="changeColor()">
<table width="300" border="0" id="tab">
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>2</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>3</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>4</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>5</td>
    <td>5</td>
  </tr>
</table>


</body>
</html>
php_897721669
关注
bootstrap table隔行换色
前端视听
05-05 2525
在写表格插件的时候，要不断的进行表格优化，才会让界面的感观变得越来越好看，bootstrap table的隔行换色功能也是其中的一个，几行代码就OK了。 代码如下： #mytable tr:nth-child(even){ background: #fafafa; } #mytable th{ background: #efefef; } demo示例 <!DOC...
jQuery实现table隔行换色和鼠标经过变色的两种方法
10-25
首先，我们讨论如何实现table的隔行换色。隔行换色的效果是当页面加载完成后，表格中的奇数行和偶数行会显示不同的背景色，这样做可以增强表格的可读性，使得表格的行列更加容易区分。在jQuery中，有两种常用的方法...
ul li 换色 li 列表布局隔行背景颜色
02-12
ul li 换色 li 列表布局隔行，color from red tabs 背景颜色
Javascript操纵DOM实现查找、删除、隔行换色等功能
jinvasshole
03-26 133
太久没更新博客，发表Javascript文章一篇，以示博主健在。写的不好，欢迎大家提出意见和建议。 关于DOM结点增加和修改的。有时间再加上。 &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-type" content="text/html;charset=UTF-8" /&gt; &lt;style&...
DOM实现隔行变色功能
liuguoxuanvip的博客
01-22 320
                                                 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/
使用dom节点实现表格完美隔行变色效果
席伟娜的专栏
02-27 815
//采用js节点实现隔行变色效果，超简单不容错过哦 隔行变色       hello word     hello word         hello word     hello word         hello word     hello word         hello word     hello w
4_2.DOM--实现表格隔行变色
BWater_monster的博客
03-24 144
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> table,th,td{ border: 1px solid #aaa; border-collapse: collapse; } tabl...
jquery实现表格隔行换色效果
10-23
在Web开发中，实现表格隔行换色是一个常见的页面美化功能，它不仅能够提高表格数据的可读性，还能让浏览者获得更好的视觉体验。本文将详细介绍使用jQuery库来实现表格隔行换色效果的方法。 ### jQuery简介 jQuery...
原生javascript实现隔行换色
10-24
总的来说，原生JavaScript实现隔行换色的关键在于理解DOM操作、条件语句以及事件处理。通过这种方式，我们可以为网页增加交互性和美观性，提升用户体验。同时，这也是一种很好的实践JavaScript基本技巧的机会，包括...
JS实现隔行换色的表格排序
10-20
总结来说，实现JS隔行换色的表格排序涉及到了DOM操作、数据解析、事件处理、CSS样式应用以及数据排序算法等多个核心JavaScript知识点。通过掌握这些技术，你可以创建交互性强、用户体验良好的数据展示表格。
用DOM控制的奇偶行变色的简单表格实现
10-10
用DOM控制的奇偶行变色的简单表格实现，通过javascript实现对奇偶行的表格背景颜色的控制
Js 实现表格隔行换色一例
10-29
在网页中实现表格隔行换色是一种常见的增强用户阅读体验的方式，隔行换色可以使表格的数据对比更加清晰，同时让整个表格的视觉效果更佳。Js（JavaScript）是一种广泛用于网页开发的脚本语言，利用Js可以实现各种动态...
操作元素之修改样式属性
leechoy
06-12 679
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
dom实现隔行变色的效果
02-27 837
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 表格格行变色的效果 function getRed(){  var co1=document.getElementsByName("aaa");  //alert(co1.length);   fo
使用Python将EPUB电子书网文主角换成自己
zxjiaya的博客
11-07 997
使用Python将EPUB电子书网文主角换成自己
vue3中使用vue-diff工具来比较数据差异
kanno的博客
11-04 318
vue3中使用vue-diff工具来比较数据差异，可以比较json、文本、css、js等数据格式，通过颜色来标识差异的地方
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
ceshiren_com的博客
11-05 562
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
上门理发系统的搭建
最新发布
app830的博客
11-07 302
上门理发系统的搭建涉及多个方面，包括技术架构、功能模块、用户体验以及运营策略等。服务器：部署应用到云服务器（如AWS、阿里云）或本地服务器上，确保系统的稳定性和可扩展性。消息通知：通过短信、邮件或APP推送等方式，向用户发送预约确认、提醒等消息。订单管理：用户可以查看自己的预约订单，包括待付款、已付款、已完成等状态。服务浏览与选择：展示各类理发服务，包括价格、时长、适用人群等信息。在搭建过程中，要确保系统的安全性和稳定性，防止数据泄露和系统崩溃。操作便捷：优化用户操作流程，减少不必要的步骤，提高用户体验。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 187
vxe-grid新增空行，并且定位到空行位置。
JS实现表格隔行换色与排序技术解析
"JS实现隔行换色的表格排序，主要涉及JavaScript操作DOM元素、数据绑定、CSS样式以及表格排序的实现方法。" 在网页开发中，为了提高用户体验，经常会在表格中使用隔行换色的技术，使得用户更容易区分每一行的数据。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值