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();
                }
    
            })
  • 相关阅读:
    py4CV例子2汽车检测和svm算法
    py4CV例子1猫狗大战和Knn算法
    KNN(K-Nearest Neighbor)介绍
    从机器学习谈起
    基于QProbe创建基本Android图像处理框架
    qtquickcontrols2控件集(使用参考重构)
    QtQuickcontrols2控件使用参考
    QTQuick控件基础(3)视图
    QTQuick控件基础(2)
    在win和android上同时进行OpenCV程序设计
  • 原文地址:https://www.cnblogs.com/pengpenglin/p/4664853.html
Copyright © 2011-2022 走看看