HTML之表格隔行变色

最新推荐文章于 2024-07-22 21:44:46 发布
最新推荐文章于 2024-07-22 21:44:46 发布
阅读量2.8k 收藏
点赞数
分类专栏： web前端/HTML 文章标签： html webview 前端
原文链接：https://mp.csdn.net/mp_blog/creation/editor/52553963
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <meta  charset="utf-8">

  <style type="text/css">
    thead tr{
     background:#aaf;
    }
    .odd{
        background:#ccf;    
    }
  </style>
 </head>

 <body >
  <table id="tab" border="1px" color="black" width="300px" height="50px">
    <thead>
       <tr>
         <th>编号</th>
         <th>姓名</th>
       </tr>
    </thead>
    <tbody>
        <tr>
            <td>10</td>
            <td>tom</td>
        </tr>
        <tr>
            <td>10</td>
            <td>tom</td>
        </tr>
        <tr>
            <td>10</td>
            <td>tom</td>
        </tr>
        <tr>
            <td>10</td>
            <td>tom</td>
        </tr>
        <tr>
            <td>10</td>
            <td>tom</td>
        </tr>
        <tr>
            <td>10</td>
            <td>tom</td>
        </tr>
    </tbody>
  </table>
  <script type="text/javascript">
   //查找tbody tr
   var table=document.getElementById('tab');
   var tbody=table.getElementsByTagName('tbody')[0];

    var trList=tbody.getElementsByTagName('tr');

    for(var i=0;i<trList.length;i++){
      if(i%2==1){
          var tr=trList[i];
          var classNode=document.createAttribute('class');
          
          classNode.value='odd';
          tr.setAttributeNode(classNode);
      }
    }

  </script>
 </body>
</html>
 

worn.xiao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML系列：n种方式实现隔行变色
云端-公子清
12-09 2510
n种方式实现隔行变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
js表格隔行变色
weixin_46670235的博客
03-13 1405
个人推荐vscode编写前端 功能强大 兼容性强 实现思路 构建好HTML框架 CSS修饰之后 将获取的tbody的tr定义为一个数组，通过for循环实现遍历，注册鼠标经过与离开事件，将trs[i]的背景颜色换掉，此处我是通过改变ClassName实现的，在CSS中写出对应更改的id属性，改为需要的背景色 *获取的trs不包括表头元素 代码如下：（如有问题，欢迎指正） <!DOCTYPE html> <html lang="en"> <head> &l.
HTML表格颜色换行改变
gangtianyi的博客
02-11 520
js:{ function color() { var $aLi = $('tr'); for (var i = 1; i < $aLi.length; i++) { if (i % 2 == 0) $aLi[i].style.background = '#fff'; else $aLi[i].style.background = '#eee'; } } window.o...
HTML中的table标签属性
a1k2l45k的博客
06-19 469
和和和
HTML使用CSS实现表格隔行变色
weixin_70815247的博客
07-14 4262
HTML使用CSS实现table表格的隔行变色，要用到伪类:nth-child（）
html table表格隔行变色,css table表格隔行变色,vue中table表格隔行变色,element ui的table组件，ant-design的table组件
Eli_Code
04-11 4865
HTML table表格隔行变色 :nth-child(): 定义和用法 :nth-child(n) ： 选择器匹配父元素中的第n个子元素。n可以是一个数字，一个关键字，或者一个公式 <style> /*设置奇数行颜色*/ table tr:nth-child(odd) { background: rgb(178, 178, 179); } /*设置偶数行颜色*/
HTML对表格隔行变色
qq_38409944的博客
05-16 7505
&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;script&amp;gt; window.onload = function(){
实现 表格 隔行变色 案例
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
09-19 603
/ 2.根据元素定位所有的元素->行。为表格设置合并边框模式。//5.为当前元素设置class属性值为bg。//1.定位页面中的元素->表格。失败之前无所谓高手，在失败的面前，谁都是凡人。// 3.循环遍历所有的元素。//4.判断当前行是否为奇数或偶数。//用jQuery方法实现。//用DOM方法实现。
利用html css javascript实现表格隔行变色效果
weiyuyang250的博客
10-11 318
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
js实现表格隔行变色
01-08
这里提到的"js实现表格隔行变色"就是一种通过JavaScript来动态改变HTML表格行背景色的技术。在给出的代码示例中，我们看到一个简单的实现方式。 首先，`window.onload`事件是JavaScript中的一个常见事件，它表示当...
实现表格的隔行变色
11-13
在网页设计中，为了提升数据展示的可读性和美观性，常常会采用隔行变色的技巧来对表格进行美化。隔行变色使得用户在查看大量数据时能更容易地区分每一行，从而减轻视觉疲劳，提高阅读效率。本文将详细讲解如何实现...
表格隔行变色
10-18
在网页设计中，表格隔行变色是一种常见的视觉优化手段，它能帮助用户更清晰地分辨数据行，提高阅读和理解效率。特别是在处理大量数据的时间表格中，这种效果尤为重要。"表格隔行变色"技术通常结合JavaScript和CSS来...
网页里面表格隔行变色代码
11-20
在提供的文件"表格隔行变色.htm"中，很可能包含了以上代码示例的实际实现，你可以打开文件查看具体的HTML、CSS和JavaScript代码。理解这些基础知识对于任何Web开发者来说都是至关重要的，特别是在处理大量数据展示时...
html表格隔行变色
zwld_2233的博客
09-02 1350
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function(){ //1.获取表格 var wor = document.getElementById("biao");.
html基础：实现表格隔行变色
lena blog
08-13 241
代码 页面效果
html一键换色,隔行换色.html
weixin_35698035的博客
06-03 398
.evenClass{background: pink;}.oddClass{background: greenyellow;}.moveClass{background: red;}$(function(){//偶数行$("tr:not(:first):even").addClass("evenClass");//奇数行$("tr:not(:first):odd").addClass("oddC...
html嵌套css隔行变色,CSS应用中实现隔行换色的四种方法
weixin_40007541的博客
06-24 416
1、background背景图片如果行高固定的话，推荐使用背景图，也推荐将行高固定！兼容一切浏览器。2、CSSExpression文字：color:expression(this.sourceIndex%2?'#ff0000':'#000000');背景：background-color:expression(this.sourceIndex%2?'#ff0000':'#000000')...
Web前端：HTML篇（一）
最新发布
sjb2274540432的博客
07-22 1042
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值