JS代码TABLE中有复选框，实现隔行变色，滑过变色，复选框勾中变色

例如1奇数行是RED2偶数行是BLUE3复选框勾中GREEN4在复选框未选中的情况下onmouseover是Gray，onmouseout是：奇数行是RED偶数行是BLU... 例如 1 奇数行是RED
2 偶数行是BLUE
3 复选框勾中GREEN
4 在复选框未选中的情况下
onmouseover是Gray，
onmouseout是：奇数行是RED 偶数行是BLUE

5 在复选框选中的情况下
onmouseover是Gray，
onmouseout是GREEN 展开

 我来答

4个回答

#热议# 为什么说不要把裤子提到肚脐眼？

lxs_lingting
2011-05-17 · TA获得超过990个赞

知道小有建树答主

回答量：899

采纳率：100%

帮助的人：514万

我也去答题访问个人页

关注

展开全部

看看吧

<body>
<table width="200" border="1" id="ta">
<tr><td width="33" align="center"><input name="c1" type="checkbox" id="c1" value="checkbox"></td><td width="151">第1行</td></tr>
<tr><td align="center"><input name="c2" type="checkbox" id="c2" value="checkbox"></td><td>第2行</td></tr>
<tr><td width="33" align="center"><input name="c3" type="checkbox" id="c3" value="checkbox"></td><td width="151">第3行</td></tr>
<tr><td align="center"><input name="c4" type="checkbox" id="c4" value="checkbox"></td><td>第4行</td></tr>
</table>
</body>
<script>
check_ta();
function check_ta()
{
var ta=$("ta");
for(var i=0;i<ta.rows.length;i++)
{
var bg_color="";
if(i%2==0)
bg_color="red";
else
bg_color="blue";
if($("c"+(i+1)).checked)
bg_color="green";
ta.rows[i].style.backgroundColor=bg_color;

ta.rows[i].onmouseover=function()
{
this.style.backgroundColor="Gray";
}

ta.rows[i].onmouseout=function()
{
if($("c"+(parseInt(this.rowIndex)+1)).checked)
this.style.backgroundColor="green";
else
this.style.backgroundColor=(this.rowIndex%2==0)?"red":"blue";
}
}
}
var ch=$("ta").getElementsByTagName("input");
for(var i=0;i<ch.length;i++)
{
if(ch[i].type=="checkbox")
{
ch[i].onclick=check_ta;
}
}
function $(i){return document.getElementById(i);}
</script>

本回答由提问者推荐

已赞过 已踩过<

评论收起

剪辑客
2015-12-23 · 更多经典影视精彩镜头尽在剪辑客……

剪辑客

采纳数：825 获赞数：1656

向TA提问私信TA

关注

展开全部

利用JavaScript和jQuery实现table隔行变色，非常简单……

相关教程：http://www.tiecou.com/2171.html

已赞过 已踩过<

评论收起

t657645537
2011-05-17 · 超过19用户采纳过TA的回答

知道答主

回答量：90

采纳率：100%

帮助的人：51.6万

我也去答题访问个人页

关注

展开全部

这用JQUERY应该很好做吧，代码太长了--懒的打---主要就是给TABLE加几个事件，JQUERY可以判断是奇偶行--

已赞过 已踩过<

评论收起

shenchaoliang
2011-05-17 · TA获得超过1163个赞

知道大有可为答主

回答量：810

采纳率：0%

帮助的人：1516万

我也去答题访问个人页

关注

展开全部

难得楼上用原生态的js写了，我发个jQuery的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.odd {background-color:#FF0000;}
.even {background-color:#00CCFF;}
.check {background-color:#00FF00;}
.mouseover {background-color:gray;}
</style>
<script src="js/jquery-1.4.4.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#mytable tr").each(function(i){
var index = i+1;
var bgclass = (index%2==0) ? "even" : "odd";
if(index%2==0){
$(this).addClass(bgclass);
}
else{
$(this).addClass(bgclass);
}
if($(":checkbox",this).attr("checked")){
$(this).addClass("check")
}
$(":checkbox",this).click(function(){
if($(this).attr("checked")){
$(this).parent().parent().addClass("check");
}
else{
$(this).parent().parent().removeClass("check");
}
});
})
.mouseover(function(){
$(this).addClass("mouseover");
})
.mouseout(function(){
$(this).removeClass("mouseover");
});

});

</script>
</head>

<body>
<table id="mytable" width="400" border="1" cellpadding="0" cellspacing="0" bordercolor="#999999">
<tr>
<td width="9%"><input type="checkbox" /></td>
<td width="31%">11111</td>
<td width="20%"> </td>
<td width="20%"> </td>
<td width="20%"> </td>
</tr>
<tr>
<td><input type="checkbox" checked="checked" /></td>
<td>22222</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" checked="checked" /></td>
<td>33333</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>44444</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

</body>
</html>

已赞过 已踩过<

评论收起

更多回答（2）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

JS代码TABLE中有复选框，实现 隔行变色，滑过变色，复选框勾中变色

其他类似问题

为你推荐：

JS代码TABLE中有复选框，实现隔行变色，滑过变色，复选框勾中变色