一个朋友要的,花点时间写出来,原理就是给每个TD都加事件
演示地址:http://www.osctools.net/jsbin/ynilvftt/1
<table class="list_table">
<tr>
<th class="w40">编号</th>
<th>公司名称</th>
<th>分类</th>
<th>电话</th>
<th>地址</th>
<th class="w40">网址</th>
<th class="w40">资料库</th>
<th class="w40">性质</th>
<th class="w40">人数</th>
<th class="w40">面积</th>
<th class="w40">资金</th>
<th class="w40">操作</th>
<th class="w40">移动</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
</table>
<style type="text/css">
table.list_table{
font-family:Arial, Helvetica, sans-serif;
margin-top:10px;
border-collapse:collapse;
border:1px solid #888;
width:100%;
}
table.list_table th {
vertical-align:baseline;
padding:5px 5px 5px 5px;
background-color:#f2f2f2;
border:1px solid #ccc;
text-align:left;
text-align:center;
}
table.list_table td {
vertical-align:text-top;
padding:5px 5px 5px 5px;
background-color:#FFF;
border:1px solid #ccc;
text-align:center;
}
table.list_table tr.hover td {
background-color:#F4FAFB;
}
table.list_table tr.odd td {
background-color:red;
}
table.list_table tr td.reds{ background:#F00;}
table.list_table tr.bg td.reds {background:#f00;}
</style>
<script>
var trarr = document.getElementsByTagName('tr');
var yuanclassname = '';
var yuantdclassname=new Array();
for(var i=0, j=trarr.length; i < j; i++){
if(i % 2 == 0){
trarr[i].className = 'hover';
}else{
trarr[i].className = '';
}
}
for(var i=0, j=trarr.length; i < j; i++){
trarr[i].onmouseover=function(){
yuanclassname = this.className;
this.className = 'odd';
}
trarr[i].onmouseout=function(){
this.className = yuanclassname;
}
for(var x = 0, z = trarr[i].childNodes.length; x < z; x++){
if(trarr[i].childNodes[x].nodeName == 'TD'){
trarr[i].childNodes[x].onmouseover=function(){
var num=0;
var obj=this;
while(obj.previousSibling){
num++
obj=obj.previousSibling;
}
for(var i=0, j=trarr.length; i < j; i++){
yuantdclassname[i] = trarr[i].childNodes[num].className;
trarr[i].childNodes[num].className = 'reds';
}
}
trarr[i].childNodes[x].onmouseout=function(){
var num=0;
var obj=this;
while(obj.previousSibling){
num++
obj=obj.previousSibling;
}
for(var i=0, j=trarr.length; i < j; i++){
trarr[i].childNodes[num].className = yuantdclassname[i];
}
}
}
}
}
</script>
分享到:
相关推荐
c++ 的日历. 横排竖排输出的都有 不是用类实现
javascript横排竖排标准选项卡效果代码.docx
超漂亮的导航下载,有横排竖排的,整理的都在这了!
易语言 超级列表框 横排 竖排 sql server 2000 源码 如果有需要的可以看看哦
Linux下横排文档换竖排.pdf
excel表格如何把横排变成竖排.doc
Android手机屏幕大小不一,有480x320, 640x360, 800x480.怎样才能让App自动适应不同的屏幕呢? 其实很简单,只需要在res目录下创建不同的layout文件夹,比如layout-640x360,layout-800x480,所有的layout文件在编译...
android利用Paint在Canvas上实现竖排写字
js+css实现有立体感的按钮式文字竖排菜单效果.docx
嘿嘿,又捣鼓出一个选项卡来。以后就用这个了,很爽,无视Tab标签与容器的原始class值。照样结构/样式/行为分离~
横排文字转古书式竖排工具 论坛发帖限制? 使用这个工具吧!
C#语言实现的文字竖排工具程序源码.rar,对学习C#真的很有用的资源。
css实现文字竖排效果
图书分类标签竖排好贴.pdf
自定义textview 实现字体竖排效果
pw7.3.2精美首页横排美化
js横向菜单,竖向菜单,树状菜单效果很好,不信您下下来看看!!!使用jquery插件,使用简单!!!
HTML竖排菜单制作,美观的竖排菜单,制作竖排菜单时可能用得到
mfc自带的tabsheet控件是横排按钮在上面的,这个自绘控件实现在左侧竖排的Tab选择,并且可以添加图标。
实现文字竖排 实现方法,传入一个字符串,代表横排文字。传入一个整型值代表折行的位置。返回一个字符串,输出该字符串则横排文字已被转换为竖排文字(从右向左)