小白求助, 如何点击tr后改变单选框状态,并改变本行的文字颜色

做一个练习
代码如下<script>
function sele_record(sele_tr){
$(sele_tr).css("color","#f11");
//下面不知道怎么写了
        $(sele_tr).firstChild().firstChild().attrib("chicked","chicked
}
</script>
<body>
<table>
<tr   onclick="sele_record(this)" >
<td><input type="radio"  name="t_table " value="002" /> </td>
<td>002</td><td>abc</td><td>def</td>
<tr>
<tr   onclick="sele_record(this)" >
<td><input type="radio"  name="t_table " value="003" /> </td>
<td>003</td><td>abc</td><td>def</td>
<tr><tr   onclick="sele_record(this)" >
<td><input type="radio"  name="t_table " value="004" /> </td>
<td>004</td><td>abc</td><td>def</td>
<tr><tr   onclick="sele_record(this)" >
<td><input type="radio"  name="t_table " value="005" /> </td>
<td>005</td><td>abc</td><td>def</td>
<tr>
想要的效果是 点击一行的任意一个TD  就把第一列的RADIO 变成选中, 把颜色变成红色;
点了另外一行时 把本行的RADIO 变成选中 颜色变成红色, 把原来选中的回复原来的情况;
类似与phpMyAdmin的那种风格
我只能把颜色变掉, 不会改变radio的状态, 还有怎么回复其他行的状态和颜色HTML

解决方案 »

  1.   

    1.首先写好 选中的样式到一个class中 如
        .currt{color:#f11}
        .currt td{background-color:#ccc;}
    2.给tr 添加单击事件,以下使用的是JQ 1.9
        $("tr").on("click",function(e){ 
             var target = $(e.currentTarget), otherTarget = target .siblings();
            target .addClass("currt");//给当前行添加选中样式
            $(":radio",target).prop("checked",true);        otherTarget.siblings().removeClass("currt");//移除之前选中的样式
            $(":radio",otherTarget).prop("checked",false);
        });
      

  2.   

    给找了个例子 
     
     
    <!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>
     
     
     
     
      

  3.   

    我会这么写 $(sele_tr).find(">td input[type='radio']").prop("checked",true); 仅供参考。
      

  4.   


    $(this).children().first().children().attr("checked", true); //选中复选框
    $(this).css("background", "#FFDAB9");  //改变背景颜色
      

  5.   


            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");
                }
            }
      

  6.   

    上面的是实现CheckBox单选高亮的，name="cbList"
    CheckBox比radio好看