jquery实现表格颜色变化

在学习jquery的过程中学习到了如何利用jquery来渲染表格的颜色,这个地方由于是初次接触所以也都是一些初级的案例

首先需要介绍两个当页面加载完毕之后才会执行的函数

<script type="text/javascript">
//页面加载完毕之后执行函数体内的函数和window.οnlοad=function(){};等价
  $().ready(function(){

  });
  <br/>
  <br/>
  window.οnlοad=function(){

  };
  </script>



效果一:奇数行和偶数行颜色不一样

<script type="text/javascript">

  $(document).ready(function(){

  $("#t1 tr:even").css("background","red");
  $("#t1 tr:odd").css("background","blue");

  });

这里写图片描述

需求二:实验表格的每一行的第一列元素颜色变化

//寻找id为t2的表格下面所有的tr下面的第一个td元素
$("#t2 tr td:first-child").css("background","red");

实现效果
这里写图片描述

需求三:技术列和欧数列颜色变化

    $("#t3 tr").each(function(){
            //查找每一个tr对象中的子元素:奇数行或者偶数行的子元素
            $(this).children(":even").css("background","red");
            $(this).children(":odd").css("background","green");
        });

这里写图片描述

发布了42 篇原创文章 · 获赞 24 · 访问量 8万+

猜你喜欢

转载自blog.csdn.net/zhang245754954/article/details/54799254