唐伯虎 发表于 2021-8-6 12:10:51

jQuery之表格变色

1.radio
jQuery部分：
<script type="text/javascript">
    $(function(){
      $("tbody>tr:odd").addClass("odd"); //先排除第一行,然后给奇数行添加样式
      $("tbody>tr:even").addClass("even"); //先排除第一行,然后给偶数行添加样式
      $('tbody>tr').click(function() {
            $(this)
                .addClass('selected')
                .siblings().removeClass('selected')
                .end()
                .find(':radio',this).attr('checked',true);
      });
      // 如果单选框默认情况下是选择的，则高色.
         // $('table :radio:checked').parent().parent().addClass('selected');
      //简化:
          $('table :radio:checked').parents("tr").addClass('selected');
         //再简化:
         //$('tbody>tr:has(:checked)').addClass('selected');

    })
</script>html部分：
<body>
    <table>
      <thead>
            <tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
      </thead>
      <tbody>
            <tr><td><input type="radio" name="choice" value=""/></td>
                <td>张山</td><td>男</td><td>浙江宁波</td></tr>
            <tr><td><input type="radio" name="choice" value="" /></td>
                <td>李四</td><td>女</td><td>浙江杭州</td></tr>
            <tr><td><input type="radio" name="choice" value="" checked='checked' /></td>
                <td>王五</td><td>男</td><td>湖南长沙</td></tr>
            <tr><td><input type="radio" name="choice" value="" /></td>
                <td>找六</td><td>男</td><td>浙江温州</td></tr>
            <tr><td><input type="radio" name="choice" value="" /></td>
                <td>Rain</td><td>男</td><td>浙江杭州</td></tr>
            <tr><td><input type="radio" name="choice" value="" /></td>
                <td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
      </tbody>
    </table>
</body>css部分：
table      { border:0;border-collapse:collapse;}
td    { font:normal 12px/17px Arial;padding:2px;width:100px;}
th            { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even      { background:#FFF38F;}/* 偶数行样式*/
.odd      { background:#FFFFEE;}/* 奇数行样式*/
.selected      { background:#FF6500;color:#fff;}2.checkbox
jQuery部分：
<script type='text/javascript'>
$(function(){
    //设置除了第一行的其他行的样式
    $("tbody>tr:odd").addClass("odd");
    $("tbody>tr:even").addClass("even");
   
    $("tbody>tr").click(function(){
      //点击选中，如果本来就选中，则取消选中状态
      if($(this).hasClass('selected')){
            //将selected属性去除，同时将选中的check属性去除
            //find()方法找到当前元素的后代元素也就是找到当前tr的后代元素input，修改其属性
            $(this).removeClass('selected').find(':checkbox').attr("checked",false);
      }else{
            $(this).addClass('selected').find(':checkbox').attr("checked",true);
      }
    });
    //将选中的项添加selected样式，注意加上双引号，选择器中
    $("tbody :checkbox:checked").parents("tr").addClass("selected");
});


</script>html部分：
<body>
    <table>
      <thead>
            <tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
      </thead>
      <tbody>
            <tr><td><input type="checkbox" name="choice" value=""/></td>
                <td>张山</td><td>男</td><td>浙江宁波</td></tr>
            <tr><td><input type="checkbox" name="choice" value="" /></td>
                <td>李四</td><td>女</td><td>浙江杭州</td></tr>
            <tr><td><input type="checkbox" name="choice" value="" checked='checked' /></td>
                <td>王五</td><td>男</td><td>湖南长沙</td></tr>
            <tr><td><input type="checkbox" name="choice" value="" /></td>
                <td>找六</td><td>男</td><td>浙江温州</td></tr>
            <tr><td><input type="checkbox" name="choice" value="" /></td>
                <td>Rain</td><td>男</td><td>浙江杭州</td></tr>
            <tr><td><input type="checkbox" name="choice" value="" /></td>
                <td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
      </tbody>
    </table>
</body>css部分同上。


文档来源：51CTO技术博客https://blog.51cto.com/u_3513677/3285675
页: [1]
查看完整版本: jQuery之表格变色