标题:js如何实现变色的同时选中复选框
只看楼主
apple2683
Rank: 1
等 级:新手上路
帖 子:1
专家分:0
注 册:2011-10-30
 问题点数:0 回复次数:2 
js如何实现变色的同时选中复选框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>001</title>
</head>
<body>
<center>
<table id="senfe">
<tr>
<th>选择</th><th>姓名</th><th>性别</th><th>民族</th><th>电话</th>
</tr>

<tr>
<td><input type='checkbox' id='checkbox[]' name='checkbox[]'></td>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>

<tr>
<td><input type='checkbox' id='checkbox[]' name='checkbox[]'></td>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>

<tr>
<td><input type='checkbox' id='checkbox[]' name='checkbox[]'></td>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>

<tr>
<td><input type='checkbox' id='checkbox[]' name='checkbox[]'></td>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>

<tr>
<td><input type='checkbox' id='checkbox[]' name='checkbox[]'></td>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
</table>
</center>



<script language="javascript">
senfe("senfe","#E0E0E0","#ccc","#2894FF","#02F78E");   //senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");
function senfe(o,a,b,c,d){ //隔行变色的同时,鼠标滑过和点击都会变色
var t=document.getElementById(o).getElementsByTagName("tr");   
for(var i=0;i<t.length;i++){
    t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
    t[i].onclick=function(){
       if(this.x!="1"){
        this.x="1";
        this.style.backgroundColor=d;
        
       }else{
        this.x="0";
        this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
       }
      }
      t[i].onmouseover=function(){
       if(this.x!="1")this.style.backgroundColor=c;
      }
      t[i].onmouseout=function(){
       if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
      }
    }
    }
</script>

</body>
</html>
搜索更多相关主题的帖子: html content PUBLIC center 
2011-10-30 15:45
maglic
Rank: 1
来 自:GZ
等 级:新手上路
帖 子:33
专家分:0
注 册:2009-1-10
得分:0 
其实用jquery比较好把。。。
2011-11-25 16:51
javayang
Rank: 2
等 级:论坛游民
帖 子:5
专家分:50
注 册:2011-11-26
得分:0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{padding:0px;margin:0px;}
ul{ border:1px solid #999; border-bottom:none; float:left;}
#a{ width:186px; border-bottom:1px solid #999; float:left;}
li{ list-style:none; float:left; border-left:1px solid #999; width:60px; text-align:center;}
</style>
<script type="text/javascript">
window.onload=function(){
    var uls=document.getElementById("a").getElementsByTagName("ul");
    for(var i=1;i<uls.length;i++){
        uls[i].onmouseover=function(){
            for(var y=1;y<uls.length;y++){
                uls[y].style.background="none";
                uls[y].getElementsByTagName("input")[0].checked=false;
            }
            this.style.background="#09c";
            this.getElementsByTagName("input")[0].checked=true;
            }
    }
}
</script>
</head>
<body>
<div id="a">
    <ul>
        <li>选择</li>
        <li>姓名</li>
        <li>性别</li>
    </ul>
    <ul>
        <li><input type="checkbox" /></li>
        <li>1</li>
        <li>2</li>
    </ul>
    <ul>
        <li><input type="checkbox" /></li>
        <li>1</li>
        <li>2</li>
    </ul>
    <ul>
        <li><input type="checkbox" /></li>
        <li>1</li>
        <li>2</li>
    </ul>
</div>
</body>
</html>
2011-11-26 16:51



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-353835-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.688181 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved