接着上篇内容网页设计如何让表格线条更漂亮,今天阿权站长告诉大家如何实现表格颜色跟随鼠标移动而改变的效果,首先网页头部加载如下JS,加载方法: <script src="/js/table.js" type="text/javascript"></script>根据您的情况修改路径:
JS中的内容:
function fenlan(o, a, b, c, d) {
var t = document.getElementById(o).getElementsByTagName("tr");
for (var i = 1; i < t.length; i++) {
t[i].style.backgroundColor = (t[i].sectionRowIndex % 2 == 0) ? a : b;
t[i].onmouseover = function () {
if (this.x != "1") {
this.style.backgroundColor = c;
this.style.color = "#fff";
}
}
t[i].onmouseout = function () {
if (this.x != "1") {
this.style.backgroundColor = (this.sectionRowIndex % 2 == 0) a : b;
this.style.color = "#000";
}
}
}
}
第二步:在表格后面添加如下代码,紧挨</table>:
<script type='text/javascript' language='javascript'> fenlan("fenlan", "#e6e6e6", "#fff", "#cc0000", "#f60");</script>
第三步:在开始<table>中添加:id="fenlan"
效果如:http://www.seozz.net/sanhuicheng.html
本文地址:http://www.seozz.net/zzseo/TABLEJS.html