js处理表格对table进行修饰

  js处理表格

  1、行颜色间隔显示

  css样式:两个选择器

  

复制代码 代码如下:

  <style type="text/css">

  .one{

  background-color:#33ffcc;

  }

  .two{

  backgound-color:#ffff66;

  }

  </style>

  <script type="text/javascript">

  function trcolor()

  //控制间隔行颜色显示不同

  {

  var tabNode = document.getElementsByTagName("table")[0];

  //获取table节点

  var trs = tabNode.rows;

  //获取table中的所有的行

  for(var x=1; x<trs.length;x++)

  {

  if(x%2 == 1)

  trs[x].className ="one";

  else

  trs[x].className ="two";

  }

  }

  //通过onload方法,在网页加载完成后,运行trcolor方法,实现表格的间隔行颜色。

  window.onload = function()

  {

  trcolor();

  }

  </script>

  2、鼠标移动到某一行,改行颜色加亮,移开后恢复原来颜色

  

复制代码 代码如下:

  <style type="text/css">

  .over{

  background-color:##00ff00;

  }

  <style>

  <script type="text/javascript">

  var name;

  function trMouse()

  {

  var tabNode = document.getELementsByTagName("table")[0];

  //通过for循环,对每个tr标签加上onmouseover与onmouseout属性

  for(var x=0;x<trs[x].length;x++)

  {

  trs[x].onmouseover = function()

  {

  name=this.className;

  this.className="over";

  }

  tes[x].onmouseout = function()

  {

  this.className = name;

  }

  }

  }

  </script>