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>




 
相关文章
|
6月前
|
JavaScript
jQuery 表格全选反选
jQuery 表格全选反选
29 0
|
3月前
|
XML JavaScript 小程序
使用jquery treetable 实现树形表格拖拽
这里记录一下使用jquery treetable时遇到的坑。 我这里的需求是做一个树形表格,并且可拖拽。 最后要实现的效果大概是这样的:(文末有实例)
21 0
|
4月前
|
JavaScript BI
jQuery根据填写的input的数值导出excel表格
jQuery根据填写的input的数值导出excel表格
17 0
|
4月前
|
JavaScript Java
jQuery+Datatables实现表格批量删除功能
jQuery+Datatables实现表格批量删除功能
20 0
|
6月前
|
JavaScript
jQuery 动态添加表格数据
jQuery 动态添加表格数据
22 0
|
JavaScript 前端开发 Java
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)
jquery实现动态表格项目(表格增加删除/全选/表格变色特效) 🍅 Java学习路线:搬砖工的Java学习路线 🍅 作者:程序员小王 🍅 程序员小王的博客:https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF 🍅 扫描主页左侧二维码,加我微信 一起学习、一起进步 🍅 欢迎点赞 👍 收藏 ⭐留言 📝
243 0
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)
|
JavaScript
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
484 0
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
|
JavaScript Java
动态添加表格并增加Jquery校验
动态添加表格并增加Jquery校验
68 0
|
JavaScript 前端开发
jQuery实现表格行的删除和增加
使用jQuery实现对表格元素行的删除和增加效果
194 0
jQuery实现表格行的删除和增加
|
JavaScript
jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
258 0
jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作

相关产品

  • 云迁移中心