Js动态操作表格
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); }
