表格交替色，单击改变行颜色等

最新推荐文章于 2016-09-02 10:20:03 发布

w5q7c3

最新推荐文章于 2016-09-02 10:20:03 发布

阅读量1.8k

点赞数

分类专栏： Javascript 文章标签： function table javascript border

本文链接：https://blog.csdn.net/w5q7c3/article/details/1691591

版权

Javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<html><head><title>关于表格颜色</title>

///单击改变行颜色
function clickto(){source=event.srcElement;
if (source.tagName=="TR"||source.tagName=="TABLE")return;
while(source.tagName!="TD")source=source.parentElement;source=source.parentElement;
var ss=source.parentElement;
while(ss.tagName!="TABLE"){
ss=ss.parentElement;sst=ss.getElementsByTagName("td");
for(k=0;k<sst.length;k++){sst[k].style.backgroundColor="";}}cs=source.children;
if(cs[1].style.backgroundColor!=clickcolor){for(i=0;i<cs.length;i++){cs[i].style.backgroundColor=clickcolor;}}
else{for(i=0;i<cs.length;i++){cs[i].style.backgroundColor="";}}}
///单击改变行颜色

///鼠标onmousemove,onmouseout时的颜色
function fmove(){
var e=event.srcElement;
if(e.tagName=="TD"){e.parentNode.style.backgroundColor="#aac6f8"};}

///设置表格交替色//
function setTableBg(){
var oTr=t.rows;
var intLenTr=oTr.length;
var intLenBg=arrBg.length;
for(var i=0;i<intLenTr;i++){
intMod=i % intLenBg;
oTr[i].style.backgroundColor=arrBg[intMod];
}
}
///设置表格交替色//

</script>

</head><body οnlοad=setTableBg()>

<table id="t" οnmοuseup="clickto()" οnmοusemοve="fmove()" οnmοuseοut="fout()" width="488" height="142" border="1">
<tr>
<td>第一行</td>
<td>essdgfs>rg</td>
<td>egweg</td>
</tr>
<tr>
<td>第二行</td>
<td>wewe</td>
<td>wayuiyuiyui</td>
</tr>
<tr>
<td>第三行</td>
<td>ewgwew</td>
<td>wegwesegeg</td>
</tr>
<tr>
<td>第四行</td>
<td>esrgferg</td>
<td>egweg</td>
</tr>
<tr>
<td>第五行</td>
<td>wewe</td>
<td>waegwe</td>
</tr>
<tr>
<td>第六行</td>
<td>ewgwew</td>
<td>wegwesegeg</td>
</tr>
</table>

</body></html>

w5q7c3

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
表格交替色，单击改变行颜色等

关于表格颜色 var tmpColor=""; var clickcolor="#aac6f8"; var arrBg=["#ffffff","#d8e9fd"]; //表格交替色 ///////////////单击改变行颜色//////////////// function clickto(){source=event.srcElement; if (source.tagName=="
复制链接

扫一扫