js实现表格隔行变色，滑动变色，点击变色，配合jquery也行 求代码啊！！！！
点击变色不是点一下变色，再点一下就恢复那种而是我点击这一行变色当我点击下一行时下一行变色而之前那行恢复原来的颜色急求谢了...
点击变色不是点一下变色，再点一下就恢复那种 而是我点击这一行变色当我点击下一行时下一行变色而之前那行恢复原来的颜色 急求 谢了
展开
6个回答
展开全部
var rowIndex = -1; //选中行下标
var colorIndex; //选中行原背景色
var bgcolor; //临时储存当前行原先的颜色
var color1 = "#CFDFFF"; //交叉颜色1
var color2 = "#EFEFFF"; //交叉颜色2
var onColor = "#FFEFBF"; //鼠标行颜色
var selectColor = "#FFBFFF"; //选中行颜色
window.onload = function () {
updateColor("tb", 1);
}
//参数（表格ID，跳过多少行头）
function updateColor(id, passRow) {
var tb = document.getElementById(id);
for (var i = passRow; i < tb.rows.length; i++) {
var row = tb.rows[i];
row.onmouseover = function () {
bgcolorOver(this);
}
row.onmouseout = function () {
bgcolorOut(this);
}
row.onclick = function () {
rowClick(this);
}
if (i % 2 == 0) {
row.style.backgroundColor = color1;
} else {
row.style.backgroundColor = color2;
}
}
}
function bgcolorOver(obj) {
if (rowIndex == obj.rowIndex) {
return;
}
bgcolor = obj.style.backgroundColor;
obj.style.backgroundColor = onColor;
}
function bgcolorOut(obj) {
if (rowIndex == obj.rowIndex) {
return;
}
obj.style.backgroundColor = bgcolor;
}
function rowClick(obj) {
if (rowIndex != obj.rowIndex) {
if (rowIndex != -1) {
tb.rows[rowIndex].style.backgroundColor = colorIndex;
}
rowIndex = obj.rowIndex;
colorIndex = bgcolor;
obj.style.backgroundColor = selectColor;
}
}
<table style="width:300px;" id="tb">
<tr>
<td>1</td><td>A</td><td>a</td>
</tr>
<tr>
<td>2</td><td>B</td><td>o</td>
</tr>
<tr>
<td>3</td><td>C</td><td>e</td>
</tr>
</table>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
//隔行换色
$("ul:even").css("background","#ccc")
$("ul li").hover(function(){
//当鼠标滑过,操作
.css("background","red")
},function(){
//当鼠标滑出,操作
.css("background","green")
}).click(function(){
//当鼠标点击,操作
$(this).css("background","blue")
});
</script>
上边html代码是body区的内容,要在head区域加入jquery.js 才会有效果.
var Aye = {
name:"辽宁阿野",
work:"网站建设,收费帮忙解决各种网站问题",
QQ:"275744448",
home:
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$(function () {
$("#table tr").click(function(){
$(this).addClass("red");
$(this).siblings().removeClass("red");
})
});<style>
.red {
background-color: red;
}
</style>
<table border="1px;" id="table">
<tr>
<td>123</td><td>123</td><td>123</td>
</tr>
<tr>
<td>123</td><td>123</td><td>123</td>
</tr>
<tr>
<td>123</td><td>123</td><td>123</td>
</tr>
</table>
这个可以么，欢迎追问.
追问
有q吗？加q说 这儿不好说 我q 1017769912
追答
441403517
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<table>
<tr onclick="changeBg(this,1)" onmouseover="changeBg(this)" onmouseout="changeBg(this)"><td width="200px;">测试代码</td></tr>
<tr onclick="changeBg(this,1)" onmouseover="changeBg(this)" onmouseout="changeBg(this)"><td width="200px;">测试代码</td></tr>
<tr onclick="changeBg(this,1)" onmouseover="changeBg(this)" onmouseout="changeBg(this)"><td width="200px;">测试代码</td></tr>
</table>
</body>
<script>
function changeBg(otr,type){
if(type==1){
otr.style.backgroundColor="green";
return;
}
if(otr.style.backgroundColor=="red"){
otr.style.backgroundColor="white";
}else{
otr.style.backgroundColor="red";
}
}
</script>
</html>
追问
你这个不行啊 一上来全没背景色 一点击全红色了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style type="text/css">
*{margin:0;padding:0;list-style:none;}
ul{overflow:hidden;background:green;}
li{float:left;padding:10px;}
.active{color:blue;}
</style>
<ul onclick='oEvent(event,"li")';>
<li class="active">111</li>
<li>222</li>
<li>333</li>
<li>不用jquery</li>
</ul>
<script type="text/javascript">
//ev 是事件源,el是子元素
function oEvent(ev,el){
var ev = ev || event;
var target = ev.target || ev.scrElement;
if(target.nodeName.toLowerCase() == el){
for(var i=0;i<target.parentNode.children.length;i++){
target.parentNode.children[i].className="";
}
target.className="active";
}else{
alert("你点击的不是li 啊") ;//可以删除
}
}
</script>
*{margin:0;padding:0;list-style:none;}
ul{overflow:hidden;background:green;}
li{float:left;padding:10px;}
.active{color:blue;}
</style>
<ul onclick='oEvent(event,"li")';>
<li class="active">111</li>
<li>222</li>
<li>333</li>
<li>不用jquery</li>
</ul>
<script type="text/javascript">
//ev 是事件源,el是子元素
function oEvent(ev,el){
var ev = ev || event;
var target = ev.target || ev.scrElement;
if(target.nodeName.toLowerCase() == el){
for(var i=0;i<target.parentNode.children.length;i++){
target.parentNode.children[i].className="";
}
target.className="active";
}else{
alert("你点击的不是li 啊") ;//可以删除
}
}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
