全选,取消,反选,删除表格的应用

最新推荐文章于 2025-09-10 16:16:57 发布

吃素的小动物

最新推荐文章于 2025-09-10 16:16:57 发布

阅读量105

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cxx8181602/p/6189333.html

本文提供了一个使用jQuery实现的表格操作示例，包括全选、取消选择、反选以及删除已选择行的功能。通过简单的HTML和JavaScript代码展示了如何进行这些常用操作。

全选,取消,反选,删除表格的应用demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

        <script type="text/javascript">
        $(function(){
                var $checkbox=$("input:checkbox");
                //全选按钮
                $("#quanxuan").click(function(){
                    $($checkbox).prop("checked",true);
                });
                //取消按钮
                $("#quxiao").click(function(){
                    $($checkbox).prop("checked",false);
                });
                //反选按钮
                $("#fanxuan").click(function(){
                    for(var i=0;i<$checkbox.length;i++){
                        $checkbox[i].checked =! $checkbox[i].checked;
                    }
                });
                //删除按钮
                $("#del").click(function(){
                
                    for(var i=0;i<$checkbox.length;i++){
                        if($checkbox[i].checked){
                            var trs_obj=$checkbox[i].parentNode.parentNode;
                            $(trs_obj).remove();
                        }
                    }
                });
        });
        </script>
    </head>
    <body>
        <table border="1" width="500">
            <tr>
                <td>序号</td>
                <td>商品</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>1001</td>
                <td>小米5s</td>
                <td>已发货</td>
                <td><input type="checkbox" /></td>
            </tr>
            <tr>
                <td>1002</td>
                <td>小米5s</td>
                <td>已发货</td>
                <td><input type="checkbox" /></td>
            </tr>
            <tr>
                <td>1002</td>
                <td>小米5s</td>
                <td>已发货</td>
                <td><input type="checkbox" /></td>
            </tr>
            <tr>
                <td colspan="4">
                    <input type="button" id="quanxuan" value="全选" />
                    <input type="button" id="quxiao" value="取消" />
                    <input type="button" id="fanxuan" value="反选" />
                    <input type="button" id="del" value="删除" />
                </td>
            </tr>
        </table>
    </body>
</html>