使用DOM方法实现表格的隔行变色效果

最新推荐文章于 2022-07-14 19:00:59 发布
最新推荐文章于 2022-07-14 19:00:59 发布
阅读量614 收藏 1
点赞数 1
文章标签： xhtml javascript border html 文档
 

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


<!--

-->

 


</head>

<body>
<div></div>
<table width="300" border="0">
  <tr>
    <td>111111111111</td>
 <td>111111111111</td>
  </tr>
  <tr>
    <td>222222222222</td>
 <td>222222222222</td>
  </tr>
  <tr>
    <td>333333333333</td>
 <td>333333333333</td>
  </tr>
  <tr>
    <td>444444444444</td><td>444444444444</td>
  </tr>
  <tr>
    <td>555555555555</td> <td>555555555555</td>
  </tr>
  <tr>
    <td>666666666666</td> <td>666666666666</td>
  </tr>
  <tr>
    <td>777777777777</td>  <td>777777777777</td>
  </tr>
  <tr>
    <td>888888888888</td> <td>888888888888</td>
  </tr>
</table>
<script language="javascript" type="text/javascript">
var str=document.getElementsByTagName("tr");
 for(var i=0;i<=str.length;i++){
  if((i%2)==0){
   str[i].style.background="red";
   }else{
   str[i].style.background="green";
    }
  }
 
</script>

</body>
</html>

gengzixi
关注
用DOM控制的奇偶行变色的简单表格实现
10-10
用DOM控制的奇偶行变色的简单表格实现，通过javascript实现对奇偶行的表格背景颜色的控制
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
135.DOM效果实现:表格的隔行变色
qq_56008519的博客
07-14 494
效果图第一个表格点击后一列的表格会变色第二个表格隔行变色第三个表格点击后一行的表格会变色三个表格的基本样式css部分html部分。
使用dom节点实现表格完美隔行变色效果
席伟娜的专栏
02-27 824
//采用js节点实现隔行变色效果，超简单不容错过哦 隔行变色       hello word     hello word         hello word     hello word         hello word     hello word         hello word     hello w
实现表格隔行变色
weixin_30657999的博客
01-19 123
<SCRIPT LANGUAGE=”JavaScript”> $(document).ready(function(){ 　　$(".instore-table tr:even").css("background","#f6f7fa"); 　　$(".instore-table tr:even").attr("bg","#f6f7fa"); 　　$(".instore-ta...
javascript实现table表格隔行变色的方法
10-24
在本篇文章中，我们将学习如何使用JavaScript来实现一个表格隔行变色的效果。具体来说，我们会了解到以下几个方面的知识点： 1. JavaScript基础语法：JavaScript的基本语法包括变量声明、函数定义、条件判断、循环...
jquery实现表格隔行换色效果
10-23
本文将详细介绍使用jQuery库来实现表格隔行换色效果的方法。 ### jQuery简介 jQuery是一个快速、小巧、功能丰富的JavaScript库，它封装了JavaScript常用的功能代码，提供了一种简洁的JavaScript操作方式。通过...
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
12-04
总结起来，通过结合CSS和jQuery，我们可以实现表格的隔行变色以及高亮当前选择行的效果，提升用户在浏览表格数据时的视觉体验。这个方法不仅适用于这个特定的示例，也可以灵活应用到其他类似的表格美化场景中。
原生JS操作网页给p元素添加onclick事件及表格隔行变色
10-26
其次，表格隔行变色也是常见的网页视觉效果之一，可以增加用户的视觉体验。通过CSS可以较容易地实现这一效果，但在原生JS中实现则需要通过脚本动态改变样式。在本例中，首先通过document.getElementById()方法获取到...
jQuery实现隔行背景色变色
12-10
隔行变色有很多中方法来实现，之前我都是直接将判断代码写在程序中，今天我们来使用jQuery实现，代码奉上~ jQuery代码： 代码如下:        $(function(){             var item = $(“tr”);             for(var i=0;i<item.length;i++){                 if(i%2==0){                     item[i].style.backgroundColor=”#888″;                 }             }       
使用DOM操作实现表格隔行变色、高亮及新增行
DALOCAN的博客
09-16 425
使用DOM操作实现表格隔行变色、高亮及新增行第一次发剥壳 第一次发剥壳 根据前端的学习视频，加上自己的一些想法，将函数封装，代码优化。最后输出的一个熟悉DOM操作的文档，希望和大家一起学习探讨嘻嘻。 1.样式代码 <style> table,th,td{ border: 1px solid black; border-collapse: collapse; ...
DOM实现隔行变色功能
liuguoxuanvip的博客
01-22 332
                                                 &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;/
表格隔行变色效果
donggua123011的博客
05-22 180
因为表格第一行不改变鼠标经过样式，所以整体表格分为thead和tbody两部分 thead头部部分 tbody部分 设置css样式 设置js部分 鼠标经过tr行，当前的背景颜色就要改变，鼠标离开又要去掉背景颜色，所以会用到鼠标经过:onmouseover和鼠标离开:onmouseout事件 因为第一行不改变，所以我们只获取tobdy里面的行，然后利用循环事件绑定鼠标经过和鼠标离开效果在js里面添加一个类用于js更改后的背景颜色 ...
实现 表格 隔行变色 案例
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
11-03 1341
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格隔行变色</title> <script src="../jquery.js"></script> <style> table{ width:100%; }
DOM操作,隔行换色
weixin_65014714的博客
02-04 1295
这两种方法都是行内样式,都是点击事件,后续我还会上传通过css样式,控制背景色,还有鼠标进入离开的隔行换色
dom实现隔行变色的效果
02-27 848
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
使用dom实现隔行变色
web开发
03-07 263
&lt;!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;htmlxmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;met
JavaScript--DOM操作例子：隔行变色
weixin_30628077的博客
10-19 111
上效果： 实现思想： 主要是js动态创建标签，还有动态结合css实现样式 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 &...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值