<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(); } })