console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>左右移动</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body style="background: #fff;">
新增学生请到班级管理页面操作
<div class="row">
<div class="left-box">
<div class="group-switch-tab">
<a href="javascript:void(0);" class="sel">按实训组导入</a><a href="javascript:void(0);">按班级导入</a>
</div>
<table class="table table-striped table-bordered class-order">
<thead>
<tr class="stu-list-head">
<th class="f-tal checktable"><input type="checkbox" id="checkall" onclick="checkall()"><label
for=""></label></th>
<th class="f-tac">班级名称</th>
<th class="f-tac">班级人数</th>
</tr>
</thead>
<tbody id="left-data1">
<tr>
<td>
<input type="checkbox" name="chk" data-type="1" value="10001" data-name="江西财院"
data-num="3"><label for=""></label>
</td>
<td class="stu-phone f-tac" id="classname_10001">江西财院</td>
<td class="stu-name f-tac" id="num_10001">3</td>
</tr>
<tr>
<td>
<input type="checkbox" name="chk" data-type="1" value="10002" data-name="奥派在线" data-num="2">
<label for=""></label>
</td>
<td class="stu-phone f-tac" id="classname_10002">奥派在线</td>
<td class="stu-name f-tac" id="num_10002">2</td>
</tr>
<tr>
<td>
<input type="checkbox" name="chk" data-type="1" value="10003" data-name="电商一班" data-num="5">
<label for=""></label>
</td>
<td class="stu-phone f-tac" id="classname_10003">电商一班</td>
<td class="stu-name f-tac" id="num_10003">5</td>
</tr>
</tbody>
</table>
<table class="table table-striped table-bordered shixun-order" style="display: none;">
<thead>
<tr class="stu-list-head">
<th class="f-tal checktable"><input type="checkbox" id="checkall2" onclick="checkall2()"><label
for=""></label></th>
<th class="f-tac">实训名称</th>
<th class="f-tac">实训人数</th>
</tr>
</thead>
<tbody id="left-data2">
<tr>
<td>
<input type="checkbox" name="chk2" data-type="2" value="20001" data-name="实训一" data-num="3">
<label for=""></label>
</td>
<td class="stu-phone f-tac" id="classname_20001">实训一</td>
<td class="stu-name f-tac" id="num_20001">3</td>
</tr>
<tr>
<td>
<input type="checkbox" name="chk2" data-type="2" value="20002" data-name="实训二" data-num="2">
<label for=""></label>
</td>
<td class="stu-phone f-tac" id="classname_20002">实训二</td>
<td class="stu-name f-tac" id="num_20002">2</td>
</tr>
<tr>
<td>
<input type="checkbox" name="chk2" data-type="2" value="20003" data-name="实训三" data-num="5">
<label for=""></label>
</td>
<td class="stu-phone f-tac" id="classname_20003">实训三</td>
<td class="stu-name f-tac" id="num_20003">5</td>
</tr>
</tbody>
</table>
</div>
<div class="group-move-operate">
<a href="javascript:void(0);" id="left"><i class="icon-toleft"></i>左移</a>
<a href="javascript:void(0);" id="right"><i class="icon-toright"></i>右移</a>
</div>
<div class="right-box">
<div class="group-switch-tab">已选班级/实训组
</div>
<table class="table table-striped table-bordered">
<thead>
<tr class="stu-list-head">
<th class="f-tal checktable"><input type="checkbox" id="checkall3" onclick="checkall3()"><label
for=""></label></th>
<th class="f-tac">班级名称（实训组名称）</th>
<th class="f-tac">班级（实训组）人数</th>
</tr>
</thead>
<tbody id="right-data">
</tbody>
</table>
</div>
</div>
<button class="btn btn-primary" id="submit">保存</button>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
<script src="../js/common.js"></script>
<script>
$('.group-switch-tab a').click(function () {
var index = $(this).index();
$('.group-switch-tab a').removeClass('sel');
$(this).addClass('sel');
if (index == 0) {
$('.class-order').show();
$('.shixun-order').hide();
} else {
$('.class-order').hide();
$('.shixun-order').show();
}
})
</script>
<script>
$("#submit").click(function () {
});
$("#right").click(function () {
var a = $('#left-data1 input[type=checkbox]:checked');
var b = $('#left-data2 input[type=checkbox]:checked');
if (a.length > 0 || b.length > 0) {
a.each(function () {
var appendHtml = $(this).parent().parent();
$(appendHtml).appendTo("#right-data");
})
b.each(function () {
var appendHtml = $(this).parent().parent();
$(appendHtml).appendTo("#right-data");
})
}
});
$("#left").click(function () {
var c = $('#right-data input[type=checkbox]:checked');
if (c.length > 0) {
c.each(function () {
console.log($(this).data("type"));
var appendHtml = $(this).parent().parent();
if ($(this).data("type") == 1) {
$(appendHtml).appendTo("#left-data1");
} else {
$(appendHtml).appendTo("#left-data2");
}
})
}
});
</script>
</html>