实现表格的变色

原创 2018年04月17日 10:50:07

这周学习的是对象的属性和方法而实现表格的变色就是用获取节点以及了解各个节点的关系

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
       window.onload=function(){
        var mytable=document.getElementById("student");
        var nodes =mytable.childNodes;
         for (var i=0;i<nodes.length;i++){
          if (nodes[i].nodeName=='TBODY'){
          var trs =nodes[i].childNodes;
          for(var j=0;j<trs.length;j++){
          if(trs[j].nodeName!='#text'){
          var tds=trs[j].childNodes;
          for(var k=0;k<tds.length;k++){
          if(tds[k].nodeName!='#text'){
          alert(tds[k].innerHTML);
          }
          }
          }
          }
          }
          }


         }
</script>
</head>
<body>
<table id="student" width="200" border="1">
<thead>
<tr>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>21</td>
</tr>
</tbody>
</table>
</body>

</html>


jquery表格变色

  • 2011年07月08日 15:09
  • 1KB
  • 下载

网页里面表格隔行变色代码

  • 2013年11月20日 22:52
  • 957B
  • 下载

实现表格隔行/隔列变色

table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-ch...
  • lh1988729
  • lh1988729
  • 2017-11-13 09:57:51
  • 279

表格变色例子

今天做了《锋利的Jquery》的表格变色的例子。作为一个这一行业的green-hander,我决定一步一个脚印从简单的做起,把基础打扎实,看书要和写代码结合起来。我决定把书中的每个例子看一遍再做一遍再...
  • natalie86
  • natalie86
  • 2015-01-17 20:02:40
  • 510

鼠标经过背景变色,CSSJavascript实现表格背景变色

第一种: DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">HTML>HEAD>TITLE> CSS样式里使用JavaScript...
  • ice_spar
  • ice_spar
  • 2007-05-04 14:09:00
  • 3049

JavaScript+CSS+DIV实现表格变色

设置一个表格,当鼠标移动到某行时,颜色改变,鼠标离开时,颜色变为原来的样子。每一行都要两个鼠标事件: 1.鼠标覆盖:onMouseOver 2.鼠标离开:onMouseOut   同时这两个事件...
  • i_belive_my_love
  • i_belive_my_love
  • 2017-09-21 20:56:19
  • 86

javascript实现网页中表格的行随着鼠标移动而变色,实时变色表格行

  • 2009年09月04日 21:55
  • 2KB
  • 下载

jquery实现表格中点击相应行变色功能

对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除。类似于: DOCTYPE html> html lang="en" xmlns...
  • zhang_yang_43
  • zhang_yang_43
  • 2016-05-08 09:26:06
  • 984

鼠标划过表格行变色效果JS

/* 当鼠标移到表格上是,当前一行背景变色 */       $(document).ready(function(){             $(".g-sun-li tr td").mous...
  • zl1zl2zl3
  • zl1zl2zl3
  • 2015-07-21 09:45:25
  • 1027

js实现表格隔行变色和鼠标移入高亮

代码如下: window.onload=function() { var oTab=document.getElementById...
  • Q_004
  • Q_004
  • 2017-08-20 18:36:46
  • 631
收藏助手
不良信息举报
您举报文章:实现表格的变色
举报原因:
原因补充:

(最多只允许输入30个字)