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

小白求助, 如何点击tr后改变单选框状态,并改变本行的文字颜色
做一个练习
代码如下


我只能把颜色变掉, 不会改变radio的状态, 还有怎么回复其他行的状态和颜色                                                  HTML                                              
[解决办法]
给找了个例子 
 
 
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 
 
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 
&lt;head&gt;
 
    &lt;title&gt;jQuery控制table表格中Radio选中变色&lt;/title&gt;
 
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; 
 
 
 
    
 
    &lt;style type="text/css"&gt;
 
        @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;}
 
    &lt;/style&gt;
 
    
 
    &lt;script type="text/javascript"&gt;
 
        $(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');
 
            });
 
            
 
        });
 
    &lt;/script&gt;
 
    
 
&lt;/head&gt;
 
&lt;body&gt;
 
 
&lt;table class="table"&gt;
 
    &lt;tr&gt;&lt;th colspan="3"&gt;jQuery控制table表格中Radio选中变色&lt;/th&gt;&lt;/tr&gt;
 
    &lt;tr&gt;&lt;td&gt;&lt;input type="radio" name="rad" value=""/&gt;&lt;/td&gt;&lt;td&gt;000&lt;/td&gt;&lt;td&gt;111&lt;/td&gt;&lt;/tr&gt;
 
    &lt;tr&gt;&lt;td&gt;&lt;input type="radio" name="rad" value=""/&gt;&lt;/td&gt;&lt;td&gt;222&lt;/td&gt;&lt;td&gt;333&lt;/td&gt;&lt;/tr&gt;
 
    &lt;tr&gt;&lt;td&gt;&lt;input type="radio" name="rad" value="" checked="checked"/&gt;&lt;/td&gt;&lt;td&gt;444&lt;/td&gt;&lt;td&gt;555&lt;/td&gt;&lt;/tr&gt;
 
    &lt;tr&gt;&lt;td&gt;&lt;input type="radio" name="rad" value=""/&gt;&lt;/td&gt;&lt;td&gt;666&lt;/td&gt;&lt;td&gt;777&lt;/td&gt;&lt;/tr&gt;
 
    &lt;tr&gt;&lt;td&gt;&lt;input type="radio" name="rad" value=""/&gt;&lt;/td&gt;&lt;td&gt;888&lt;/td&gt;&lt;td&gt;999&lt;/td&gt;&lt;/tr&gt;
 
&lt;/table&gt;
 
 
 
&lt;/body&gt;
 
&lt;/html&gt;
 
 
 
 


[解决办法]

        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");
            }
        }
小白, 怎么点击tr后改变单选框状态,并

热点推荐
