小白, 怎么点击tr后改变单选框状态,并改变本行的文字颜色

2013-07-08
小白求助, 如何点击tr后改变单选框状态,并改变本行的文字颜色做一个练习代码如下我只能把颜色变掉, 不会改
小白求助, 如何点击tr后改变单选框状态,并改变本行的文字颜色
做一个练习
代码如下


我只能把颜色变掉, 不会改变radio的状态, 还有怎么回复其他行的状态和颜色                                                  HTML                                              
[解决办法]
给找了个例子 
 
 
<!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>
 
    <title>jQuery控制table表格中Radio选中变色</title>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
 
 
 
    
 
    <style type="text/css">
 
        @charset "utf-8";
 
        body {font-family: "宋体";font-size: 12px; margin:0; padding:0; color:#505050;background-color:White;}
 
        /*表格*/
 
        table{ width:400px;border-collapse:collapse;cursor:pointer;word-break:keep-all;}
 
        .table th{background-color:#D4ECFD;}
 
        .table th, .table td{text-align:left;text-indent:1em;height:25px;line-height:25px;border:solid #b4d3ea 1px;}
 
        .table{width:400px;}
 
        tr.odd  { background:#F7FFFF;}
 
        tr.highlight { background:#A1FFFF;}
 
        tr.selected  { background:#2FFFFF;}
 
    </style>
 
    
 
    <script type="text/javascript">
 
        $(function() {
 
 
            //高亮显示
 
            $(".table tr").hover(
 
            function() { $(this).addClass("highlight"); },
 
            function() { $(this).removeClass("highlight"); });
 
 
            //单选框默认选中.变色.
 
            $('.table input[type="radio"]:checked').parents('tr').addClass('selected');
 
            
 
            //单选框
 
            $('.table tr').click(function() {
 
                $(this).siblings().removeClass('selected');
 
                $(this).addClass('selected'); 
 
 
                $(this).find('input[type="radio"]').attr('checked', 'checked');
 
            });
 
            
 
        });
 
    </script>
 
    
 
</head>
 
<body>
 
 
<table class="table">
 
    <tr><th colspan="3">jQuery控制table表格中Radio选中变色</th></tr>
 
    <tr><td><input type="radio" name="rad" value=""/></td><td>000</td><td>111</td></tr>
 
    <tr><td><input type="radio" name="rad" value=""/></td><td>222</td><td>333</td></tr>
 
    <tr><td><input type="radio" name="rad" value="" checked="checked"/></td><td>444</td><td>555</td></tr>
 
    <tr><td><input type="radio" name="rad" value=""/></td><td>666</td><td>777</td></tr>
 
    <tr><td><input type="radio" name="rad" value=""/></td><td>888</td><td>999</td></tr>
 
</table>
 
 
 
</body>
 
</html>
 
 
 
 


[解决办法]

        function SelectRecord(obj) {
            //选中行的复选框
            if ($(obj).children().first().children().attr("checked")) {
                //复原所有行
                $(":checkbox[name=cbList]").each(function () {
                    $(this).removeAttr("checked");
                    $(this).css("background", "#FFFFFF");
                }); 
 

                //选中行
                $(obj).children().first().children().attr('checked', 'checked');
                $(obj).css("background", "#FFDAB9");
            }
            //取消选中
            else {
                //还原
                $(obj).css("background", "#FFFFFF");
            }
        }
热点排行
JavaScript

小白, 怎么点击tr后改变单选框状态,并改变本行的文字颜色
