Jquery 用Table模拟行列选中

公司要求把CS项目上的一个功能搬运到BS上,我觉得以后的开发肯定要脱离控件 ,所以自己用jquery模拟了一个 ,以下是代码

<!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="">
    <script src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function(){
            
            //多选
//            $(".tbChoose").click(function(){
//                    
//                    var color1=$(this).css("background-Color");
//                    
//                    
//                    
//                    //选中
//                    if(color1=="transparent"){
//                        $(this).css("background-Color","red");
//                        //改变选中的文字
//                        $(this).find("td:first").text("是");
//                        
//                    }
//                    else{
//                        $(this).css("background-Color","transparent");
//                        $(this).find("td:first").text("否");
//                    }
//                    
//                    
//                    
//
//            })

            //单选
            $(".tbChoose").click(function(){
                var color1=$(this).css("background-Color");
                    

                    var count=$(".tbChoose").find("td:first").length;
                    //alert(count);
                    //选中
                    if(color1=="transparent"){
                        
                        //清空其他类型
                        $(".tbChoose").css("background-Color","transparent");
                        $(this).css("background-Color","red");
                        //文本重置
                        $(".tbChoose").find("td:first").text("");
                        //改变选中的文字
                        $(this).find("td:first").text("");
                        
                    }
                    else{
                        //改变选中的文字
                        $(".tbChoose").css("background-Color","transparent");
                        $(this).css("background-Color","transparent");
                        $(this).find("td:first").text("");
                        
                    }

            });


        })
    </script>
 </head>

 <body>
        <table border="1" width="50%">
            <tr class="tbChoose" > 
                <td></td>
                <td>
                    111111111111111111
                </td>
            </tr>

            <tr class="tbChoose">
                <td></td>
                <td>
                    2222222222222222222
                </td>
            </tr>
                <tr class="tbChoose">
                <td></td>
                <td>
                    3333333333333333333
                </td>
            </tr>
        </table>
 </body>
</html>

做完以后 实现的效果是这样的 单选效果是 每次只能选中 一行  被选中的 那行的文本会变成是 ,其他的为否  如图 

              多选效果是,可以选中多行 被选中的 那行的文本会变成是 ,其他的为否 如图 

  取消选中 只需在已选中的行上再次点击,即可取消选中

 

 

样式什么的 不是我的擅长

posted @ 2013-07-13 21:37  瑞文(Raven)  阅读(650)  评论(0编辑  收藏  举报