您的位置：首页 > Web前端 > JavaScript

使用JS实现简单的表格的增加删除全选反选以及高亮效果

2017-09-22 11:13 1446 查看
友情提示：运行代码还需在网上下载jquery.min.js文件并把html文件反正同一文件下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        table,tr,th,td{

            padding: 0;

            margin: 0;

        }

        table {

            border: 2px solid #aaa;

            width: 500px;

            text-align: center;

        }

        tr,th,td {

            border: 2px solid #aaa;

        }

        .pink {

            background-color: pink;

        }

        .blue {

            background-color: blue;

        }

    </style>

</head>

<body>

    <table>

        <thead>

        <tr>

            <th><input type="checkbox" name="checked" id="checked">全选</th>

            <th><input type="checkbox" name="checked1" id="checked1">反选</th>

            <th><button id="btn_add">添加</button></th>

        </tr>

            <tr>

                <th></th>

                <th>序号</th>

                <th>操作</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td><input type="checkbox" name="check"></td>

                <td>1</td>

                <td><button class="cla_del">删除</button></td>

            </tr>

        </tbody>

    </table>

</body>

<script src="jquery.min.js"></script>

<script>

    $(function () {

        //添加

        $('#btn_add').click(function () {

            var id = $('tbody>tr:last>td:eq(1)').text()*1+1;

            var content = '<tr>'+

                            '<td>&
4000
lt;input type="checkbox" name="check"></td>'+

                            '<td>'+id+'</td>'+

                            '<td><button class="cla_del">删除</button></td>'+

                          '</tr>';

            $('tbody').append(content);

        });

        //删除

        $('tbody').on('click','.cla_del',function () {

            $(this).parents('tr').remove();

        });

        //荧光棒效果

        $('tbody').on('hover','tr',function(){

            $(this).toggleClass('pink');

        });

        //全选

        $('#checked').click(function () {

            $('input[name=check]').prop('checked',$(this).prop('checked'));

            $('input[name=check]').each(function () {

                $(this).parents('tr').toggleClass('pink');

            })

        });

        //反选

        $('#checked1').click(function () {

            $('input[name=check]').each(function () {

                var check = $(this).prop('checked');

                $(this).prop('checked',!check);

                $(this).parents('tr').toggleClass('pink');

            })

        });

        //单选

        $('tbody').on('click','input[name=check]',function () {

            $(this).parents('tr').toggleClass('pink');

        });

        /*$('table').on('click','input[type=checkbox]',function () {

            $('tbody [name=check]').each(function () {

                if ($(this).prop('checked')) {

                    $(this).parents('tr').addClass('blue');

                } else {

                    $(this).parents('tr').removeClass('blue');

                }

            })

        })*/

    })

</script>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航