向大牛请教一个JS的问题，即点击隔行变色，再点击时还原
本人菜鸟，向大牛请教一个JS的问题，即点击隔行变色，再点击时还原。如果用IF判断如何写，不用判断能不能实现？谢谢各位了，代码贴出如下：<scripttype="text/...
本人菜鸟，向大牛请教一个JS的问题，即点击隔行变色，再点击时还原。如果用IF判断如何写，不用判断能不能实现？谢谢各位了，代码贴出如下：
<script type="text/javascript">
window.onload=function(){
var oTab = document.getElementById('tb');
var oTbd = oTab.getElementsByTagName('tbody')[0];
var oTr = oTbd.getElementsByTagName('tr');
var oBtn = document.getElementsByTagName('input')[0];
oBtn.onclick=function(){
for(var i=0;i<oTr.length;i++){
if(i%2==0){
oTr[i].style.backgroundColor = '#CCC';
}
}
}
}
</script>
<body>
<input type="button" value="换色" />
<table id="tb">
<tbody>
<tr><td>第1行</td><td>第1行</td></tr>
<tr><td>第2行</td><td>第2行</td></tr>
<tr><td>第3行</td><td>第3行</td></tr>
<tr><td>第4行</td><td>第4行</td></tr>
<tr><td>第5行</td><td>第5行</td></tr>
<tr><td>第6行</td><td>第6行</td></tr>
</tbody>
</table>
</body> 展开
<script type="text/javascript">
window.onload=function(){
var oTab = document.getElementById('tb');
var oTbd = oTab.getElementsByTagName('tbody')[0];
var oTr = oTbd.getElementsByTagName('tr');
var oBtn = document.getElementsByTagName('input')[0];
oBtn.onclick=function(){
for(var i=0;i<oTr.length;i++){
if(i%2==0){
oTr[i].style.backgroundColor = '#CCC';
}
}
}
}
</script>
<body>
<input type="button" value="换色" />
<table id="tb">
<tbody>
<tr><td>第1行</td><td>第1行</td></tr>
<tr><td>第2行</td><td>第2行</td></tr>
<tr><td>第3行</td><td>第3行</td></tr>
<tr><td>第4行</td><td>第4行</td></tr>
<tr><td>第5行</td><td>第5行</td></tr>
<tr><td>第6行</td><td>第6行</td></tr>
</tbody>
</table>
</body> 展开
3个回答
展开全部
<html>
<head>
<script type="text/javascript">
window.onload=function(){
var oTab = document.getElementById('tb');
var oTbd = oTab.getElementsByTagName('tbody')[0];
var oTr = oTbd.getElementsByTagName('tr');
var oBtn = document.getElementsByTagName('input')[0];
var flag = false;//定义一个全局变量来判断
oBtn.onclick=function(){
if (!flag) {
var color = '#CCC';
flag = true;
} else {
var color = '#FFF';
flag = false;
}
for(var i=0;i<oTr.length;i++){
if(i%2==0){
oTr[i].style.backgroundColor = color;
}
}
}
}
</script>
</head>
<body>
<input type="button" value="换色" />
<table id="tb">
<tbody>
<tr><td>第1行</td><td>第1行</td></tr>
<tr><td>第2行</td><td>第2行</td></tr>
<tr><td>第3行</td><td>第3行</td></tr>
<tr><td>第4行</td><td>第4行</td></tr>
<tr><td>第5行</td><td>第5行</td></tr>
<tr><td>第6行</td><td>第6行</td></tr>
</tbody>
</table>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用jquery的方法
$("#tb tbody tr").toggle(
function(){
$(this).css("background-color","#CCC");
},function(){
$(this).css("background-color","#00F");
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
var index = 1;
function click()
{
if(index == 1)
{
$("tr:even").css("background-color","#CCC");
$("tr:odd").css("background-color","#00F");
index = 0;
}
else if(index == 0)
{
$("tr:even").css("background-color","#FFF");
$("tr:odd").css("background-color","#C00");
index = 1;
}
}
function click()
{
if(index == 1)
{
$("tr:even").css("background-color","#CCC");
$("tr:odd").css("background-color","#00F");
index = 0;
}
else if(index == 0)
{
$("tr:even").css("background-color","#FFF");
$("tr:odd").css("background-color","#C00");
index = 1;
}
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
