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();
                }
    
            })
  • 相关阅读:
    基于 bootstrap html 响应式 布局
    柱状图 线状图 填写数据
    代码 比较工具 在线
    WEB框架之Flask
    测试学习方向
    软件测试的定义及其分类
    新博客人
    实现人脸识别性别之路---制作训练集中使用到的函数
    实现人脸识别性别之路---制作自己的训练集并读取
    实现人脸识别性别之路---opencv
  • 原文地址:https://www.cnblogs.com/pengpenglin/p/4664853.html
Copyright © 2011-2022 走看看