dom实现隔行变色的效果

最新推荐文章于 2019-09-16 15:37:58 发布
最新推荐文章于 2019-09-16 15:37:58 发布
阅读量820 收藏
点赞数
分类专栏： 代码再现 文章标签： button xhtml javascript border function input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wo1354691371/article/details/7299229
版权
 

<!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=gb2312" />
<title>表格格行变色的效果</title>
<script language="javascript" type="text/javascript">

function getRed(){
 var co1=document.getElementsByName("aaa");
 //alert(co1.length);
  for(var i=0;i<co1.length;i++){
   co1[i].style.background="red";
  
   }
 }
function getBlue(){
 var co2=document.getElementsByName("bbb");
 //alert(co2.length);
  for(var i=0;i<co2.length;i++){
   co2[i].style.background="blue";
  
   }
 }

</script>
</head>

<body>
<table width="300" border="1">
  <tr name="aaa"style=" background:#CCC">
    <td width="95">1</td>
    <td width="89">1</td>
    <td width="94">1</td>
  </tr>
  <tr name="bbb" style="background:#CCC">
    <td>2</td>
    <td>2</td>
    <td>2</td>
    </tr>
    <tr name="aaa" style="background:#CCC">
    <td>3</td>
    <td>3</td>
    <td>3</td>
  </tr>
  <tr name="bbb" style="background:#CCC">
    <td>4</td>
    <td>4</td>
    <td>4</td>
    </tr>
    <tr name="aaa" style="background:#CCC">
    <td>5</td>
    <td>5</td>
    <td>5</td>
  </tr>
  <tr name="bbb" style="background:#CCC">
    <td>6</td>
    <td>6</td>
    <td>6</td>
    </tr>
  
</table>
<input type="button" value="2/4/6行变成蓝色" οnclick="getBlue()">
<input type="button" value="1、3、5行变成红色" οnclick="getRed()">
</body>
</html>

duoduo220
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM实现隔行变色功能
liuguoxuanvip的博客
01-22 303
                                                 &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控制的奇偶行变色的简单表格实现
10-10
用DOM控制的奇偶行变色的简单表格实现，通过javascript实现对奇偶行的表格背景颜色的控制
使用DOM方法实现表格的隔行变色效果
02-27 585
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 -->         111111111111  111111111111         222222222222  222222222222
使用dom节点实现表格完美隔行变色效果
席伟娜的专栏
02-27 793
//采用js节点实现隔行变色效果，超简单不容错过哦 隔行变色       hello word     hello word         hello word     hello word         hello word     hello word         hello word     hello w
JS实现列表页面隔行变色效果
10-20
在本例中，我们将探讨如何使用JavaScript实现列表页面的隔行变色效果。这个效果通常应用于表格，使得用户在浏览数据时能更快地区分每一行。 首先，我们需要一个包含数据的HTML表格。在示例代码中，我们有一个ID为`...
webpack基础使用,实现隔行变色效果
08-04
在实现隔行变色效果时，我们可能需要使用 CSS预处理器，如 Sass 或 Less，或者直接在 JavaScript 中操作 DOM。这可能涉及到以下 Webpack 加载器： - **css-loader**：解析 CSS 文件，并将其转换为 JavaScript 模块...
JS与jQuery实现隔行变色的方法
10-21
总之，JavaScript和jQuery都能有效地实现隔行变色，但jQuery的简洁性和易用性使其在大多数情况下成为首选。同时，开发者应当根据项目需求和团队习惯选择最合适的实现方式，并注意保持代码的可维护性和可扩展性。
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
jquery入门—选择器实现隔行变色实例代码
10-27
在本文中，我们将深入探讨jQuery选择器及其在实现隔行变色效果中的应用。隔行变色是一种常见的网页设计技巧，通常用于表格，使得用户能更清晰地区分每一行数据。jQuery选择器使得这一过程变得更为简洁高效。 首先，...
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″;                 }             }       
ul li 换色 li 列表布局隔行背景颜色
02-12
ul li 换色 li 列表布局隔行，color from red tabs 背景颜色
使用DOM操作实现表格隔行变色、高亮及新增行
DALOCAN的博客
09-16 390
使用DOM操作实现表格隔行变色、高亮及新增行第一次发剥壳 第一次发剥壳 根据前端的学习视频，加上自己的一些想法，将函数封装，代码优化。最后输出的一个熟悉DOM操作的文档，希望和大家一起学习探讨嘻嘻。 1.样式代码 <style> table,th,td{ border: 1px solid black; border-collapse: collapse; ...
使用dom实现隔行变色
AFei_student的专栏
03-07 1178
隔行变色   function getColor(){             varta=document.getElementsByName("tab1");             vartr1=document.getElementsByTagName("tr");               //alert(color);                     //ale
JS小功能(列表页面隔行变色)简单实现
good8888job的博客
03-24 1832
效果： 代码： 复制代码 代码如下:                 window.onload = function () {             var otab = document.getElementById('tab1');             var thiscolor = '';             for (
ajax+js+dom实现隔行变色效果
dunyanan1的专栏
03-06 1397
Interlaces.css .top{       background-color:#F00;         color:#006;   }  table{       border:1px #C06 dashed;       border-collapse:collapse;   }  th,td{       border:#999 1px solid;
通过节点操作，实现隔行变色效果
Scrow1204的博客
11-04 832
要点： 1.通过.childNodes获取的节点，有标签、文本（包括空文本）、和属性都要算在内。我们要的只是元素类型为标签，通过nodeType判断元素的类型，标签返回值是1，属性返回的是2，文本返回的是3 2.通过nodeName返回的节点名字，如果是标签节点，返回标签类型的大写名字如LI（&lt;li&gt;），如果是属性节点返回的是属性的小写，文本节点返回#text 3.通过nodeV...
jquery 隔行变色
最新发布
06-15
如果你想在HTML表格（如`<table>`）或列表中实现隔行变色的效果，你可以使用jQuery的简单遍历功能结合CSS样式来完成。以下是一个基本示例： ```javascript $(document).ready(function() { // 选择所有的tr元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值