HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>装备</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="ihurtcription" content="this is my page">
<link href="style.css" type="text/css" rel="stylesheet">
<script src="js.js"></script>
</head>
<body>
<div id="main">
<!-- 仓库-->
<div id="div1">
<div id="tab2">
<span>
仓库
</span>
<table border="1" width="100%" class="tabClass">
<thead>
<tr>
<th>全选<input type="checkbox" id="check_all3" onclick="myclick('item1');"></th>
<th>编号</th>
<th>名称</th>
<th>外观</th>
</tr>
</thead>
<tbody id="tab_left">
<tr>
<td><input type="checkbox" name="item1" value="1"></td>
<td><input type="text" id="id1" value="1"></td>
<td><input type="text" id="na1" value="冲锋枪"></td>
<td><img id="ihurt1" src="1.png"></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 操作-->
<!-- 弹药库-->
<div id="div3">
<div id="tab1">
<span>弹药库</span>
<table border="1" class="tabClass">
<thead>
<tr>
<th>全选<input type="checkbox" id="check_all" onclick="myclick('item');"></th>
<th>编号</th>
<th>名称</th>
<th>外观</th>
</tr>
</thead>
<tbody id="tab_right">
<tr>
<td><input type="checkbox" name="item" value="2"></td>
<td><input type="text" id="id2" value="2"></td>
<td><input type="text" id="na2" value="冲锋枪"></td>
<td><img id="ihurt2" src="1.png"></td>
</tr>
<tr>
<td><input type="checkbox" name="item" value="3"></td>
<td><input type="text" id="id3" value="3"></td>
<td><input type="text" id="na3" value="步枪"></td>
<td><img id="ihurt3" src="2.png"></td>
</tr>
<tr>
<td><input type="checkbox" name="item" value="4"></td>
<td><input type="text" id="id4" value="4"></td>
<td><input type="text" id="na4" value="轻机枪"></td>
<td><img id="ihurt4" src="3.png"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="do">
<input type="button" value="添加" style="width:80px" onclick="add();" class="button"/>
<input type="button" value="丢弃" style="width:80px" onclick="remove();" class="button"/>
</div>
</div>
</body>
</html>
CSS
body{
background: url("bg1.png") no-repeat;
background-size: cover;
}
#main{
width: 1000px;
height: 800px;
padding: 30px 10px;
margin: 40px auto;
font-size: 14px;
border-top: 1px solid salmon;
}
/*仓库和弹药库的位置*/
#div1,#div3 {
float: left;
width: 48%;
height: 450px;
overflow: auto;
border-bottom: 1px solid salmon;
margin-right: 20px;
}
/* 仓库和弹药库字体的样式 */
#div1 span,#div3 span{
font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;
font-size: 25px;
display: block;
color: #888;
text-align: left;
}
/*按钮层*/
#do{
clear: both;
padding-top:15px;
text-align: left;
}
/* 每个框的大小 */
#tab_left input,#tab_right input{
width:54px;
border:none;
background: transparent;
}
/*表格样式*/
table{
border: none;
border-spacing: 0;
width: 100%;
}
.tabClass td, .tabClass th{
border:none;
border-bottom: 1px solid #537691;
padding: 10px;
text-align: left;
}
.tabClass th{
border: none;
background-color: #858A8D;
}
/*按钮样式*/
.button{
background: #dce9f9;
border: none;
padding: 10px 25px 10px 25px;
cursor: pointer;
color: #444;
}
img{
width: 54px;
}
JS
//全选事件
function myclick(itemName){
var aitems = document.getElementsByName(itemName);
for(var i = 0;i < aitems.length;i++){
if(!aitems[i].checked){
aitems[i].checked = true;
}else{
aitems[i].checked = false
}
}
}
//弹药库到仓库
function add(){
var ary = [];
var aitems = document.getElementsByName("item");
for(var i = 0;i < aitems.length;i++){
if(aitems[i].checked){
ary[i] = document.getElementById("id"+aitems[i].value).parentNode.parentNode.rowIndex;//保存下所选行的索引
removeRight(aitems[i].value);//移除弹药库的一行
}
}
/*移除掉添加到仓库的一行*/
for(var i = ary.length;i >0;i--){
var oRightTbody = document.getElementById("tab_right"); //判断数组ary里的值是不是行索引
if(!isNaN(ary[i-1])){
oRightTbody.deleteRow(ary[i-1]-1);
//移除表格的所选行
}
}
document.getElementById("check_all").checked = false;
//全选复选框置为false
} /*移除弹药库，添加仓库*/
function removeRight(op){
var iwbid = document.getElementById("id"+op).value;
var iwbna = document.getElementById("na"+op).value;
var oLeftTbody = document.getElementById("tab_left"); var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td"); td1.innerHTML = "<input type='checkbox' id='check_one' name='item1' value='"+iwbid+"'>";
td2.innerHTML = "<input type='text' id='id"+iwbid+"' value='"+iwbid+"'>";
td3.innerHTML = "<input type='text' id='na"+iwbid+"' value='"+iwbna+"'>";
td4.innerHTML = "<img id='ihurt"+iwbid+"' src='"+iwbid+".png'>"; tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
oLeftTbody.appendChild(tr);
} /*仓库到弹药库*/
function remove(){
var ary1 = [];
var aitems = document.getElementsByName("item1");
for(var i = 0;i < aitems.length;i++){
if(aitems[i].checked){
//先保存所选行的索引 在移除掉所选行
ary1[i] = document.getElementById("id"+aitems[i].value).parentNode.parentNode.rowIndex;
//保存下所选行的索引
removeLeft(aitems[i].value);//移值
}
}
for(var i = ary1.length;i >0;i--){
var oRightTbody = document.getElementById("tab_left"); //判断数组ary里的值是不是行索引
if(!isNaN(ary1[i-1])){
oRightTbody.deleteRow(ary1[i-1]-1);
//移除表格的所选行
}
}
document.getElementById("check_all3").checked = false;
//全选复选框置为false
} /*移除仓库，返回弹药库*/
function removeLeft(op) {
var iwbid = document.getElementById("id" + op).value;
var iwbna = document.getElementById("na" + op).value;
var oRightTbody = document.getElementById("tab_right"); var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td"); td1.innerHTML = "<input type='checkbox' id='check_one' name='item' value='" + iwbid + "'>";
td2.innerHTML = "<input type='text' id='id" + iwbid + "' value='" + iwbid + "'>";
td3.innerHTML = "<input type='text' id='na" + iwbid + "' value='" + iwbna + "'>";
td4.innerHTML = "<img id='ihurt"+iwbid+"' src='"+iwbid+".png'>"; tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
oRightTbody.appendChild(tr);
}