zoukankan      html  css  js  c++  java
  • table数据表格添加checkbox进行数据进行两个表格左右移动。

     <table class="table table-hover table-striped table-condensed newDateList">
                                    <thead>
                                        <tr>
                                            <th style=" 50px;">
                                                <input type="checkbox" /></th>
                                            <th>摄像机编号</th>
                                            <th>摄像机名称</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tbListNew">
                                        <%--<tr>
                                            <td>
                                                <input type="checkbox" /></td>
                                            <td>Trident</td>
                                            <td>Internet Explorer 4.0</td>
                                        </tr>--%>
                                    </tbody>
                                </table>
                                <div class="hide hiddenDIVLeft"></div>
    
            var check = "input[type='checkbox']";
            //checkbox全选
            function allChecked(tableClass) {
                $(tableClass).find(check).change(function () {
                    //判断thead处的复选框是否选中
                    var thead = $(this).parent().parent().parent();
                    if (thead.prop("nodeName") == "THEAD") {
                        if (thead.find(check).is(':checked')) {
                            $(tableClass).find(check).prop("checked", true);
                        }
                        else {
                            $(tableClass).find(check).prop("checked", false);
                        }
                    }
                })
            }
    
            //部分选取移动
            function checkboxTurn(tableClass,hiddenDIv) {
                $(tableClass).each(function () {
                    if ($(this).find(check).is(':checked')) {
                        $(hiddenDIv).append("<tr>" + $(this).html() + "</tr>");
                        $(this).remove();
                    }
                })
            }
    
            //全部选取移动
            function checkboxAllTurn(leftTable,rightTable) {
                $(rightTable).find("tbody").append($(".dateList").find("tbody").html());
                $(leftTable).find("tbody").empty();
                $(leftTable).find("thead").find(check).prop("checked", false);
            }
            //table数据从左向右移动
            allChecked(".dateList");
            $(".dateToRightBtn").click(function () {
                //全选
                if ($(".dateList thead").find(check).is(':checked')) 
                {
                    checkboxAllTurn(".dateList", ".newDateList");
                }
    
            else {
                    checkboxTurn(".dateList tbody tr", ".hiddenDIV");
                $(".newDateList tbody").append($(".hiddenDIV").html());
                $(".hiddenDIV").empty();
            }
            })
    
            //table数据从右向左移动
            allChecked(".newDateList");
            $(".dateToLeftBtn").click(function () {
                //全选
                if ($(".newDateList thead").find(check).is(':checked')) {
                    checkboxAllTurn(".newDateList", ".dateList");
                }
                    //部分选取
                else {
                    checkboxTurn(".newDateList tbody tr", ".hiddenDIVLeft")
                    $(".dateList tbody").append($(".hiddenDIVLeft").html());
                    $(".hiddenDIVLeft").empty();
                }
    
            })
  • 相关阅读:
    c#RSA的SHA1加密与AES加密、解密
    c#后台代码请求访问api接口
    Hbuilder给手机发送短信与拨打电话
    Hbuilder获取手机当前地理位置的天气
    plus.webview.create( url, id, styles, extras )参数及说明
    九九乘法表+冒泡排序(校园回忆录)
    c#数据处理总结(分组、交并差与递归)
    Hbuilder MUI 下拉选择与时间选择器
    JAVA常用开源工具与项目
    mysql 中常用功能
  • 原文地址:https://www.cnblogs.com/pengpenglin/p/4664853.html
Copyright © 2011-2022 走看看