您的位置：首页 > Web前端 > JavaScript

利用js dom操作table表格

2012-04-10 18:00 363 查看

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" media="screen" href="style/format.css">
<title>table test</title>
<script src="04.js" charset="utf-8"></script>
</head>
<body>
<table>
<tr class="mytd1"><th>日期</th><th>任务</th></tr>
<tr class="mytd1"><td>2012/3/1</td><td>first任务</td></tr>
<tr class="mytd1"><td>2012/3/2</td><td>second任务</td></tr>
<tr class="mytd1"><td>2012/3/3</td><td>third任务</td></tr>
<tr class="mytd1"><td>2012/3/8</td><td>forth任务</td></tr>
</table>

</body>
</html>

其中css中有如下设置

.mytd1{
 color:red;
}
.mytd2{
 background-color:green;
}

js中的函数如下：

function highlightRows(){
 var trs=document.getElementsByTagName("table")[0].getElementsByTagName("tr");
 for(var i=0;i<trs.length;i++){
  trs[i].onmouseover=function(){
   this.style.fontWeight="bold";
  }
  trs[i].onmouseout=function(){
   this.style.fontWeight="normal";
  }
 }
}
function changeByClassName(){
 var trs=document.getElementsByTagName("table")[0].getElementsByTagName("tr");
 for(var i=0;i<trs.length;i=i+2){
  trs[i].className="mytd2 mytd1";
 }
}

这样将这两个方法放到windows.onload中，实现的效果是奇数行和偶数行颜色不一样，当鼠标放到某行是，该行的文字变粗。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： table function stylesheet class 任务 html

相关文章推荐

新的分享

章节导航