JS实现两表格里数据来回转移的方法
本文实例讲述了JS实现两表格里数据来回转移的方法。分享给大家供大家参考。具体分析如下：
最近做项目里用到了一个 两个表格里数据的来回转移,用JS稍微做了下,界面也没有去弄很漂亮
感觉写得有点繁琐了,有时间再改进哈
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<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=\"description\" content=\"this is my page\">
<style type=\"text/css\">
a{
text-decoration: none;
text-align: center;
}
#main{
postion:relation;
}
/*左边层*/
#div1 {
float: left;
postion:relation;
}
#div1 #left{
float:left;
}
/*中间层*/
#div2{
float:left;
margin-top:50px;
}
#div2 #div2_2{
margin-top:15px;
}
/*右边层*/
#div3 {
float: left;
}
#tab_sendValue1 input,#tab_sendValue3 input{
width:40px;
border:none;
}
</style>
<script type=\"text/javascript\">
//全选事件
function myclick(e,itemName){
var items = document.getElementsByName(itemName);
for(var i = 0;i < items.length;i++){
items[i].checked = e.checked;
}
}
//移动左边表格的值到右边表格
function sendValueToRight(){
var ary = new Array();
var items = document.getElementsByName(\"item\");
for(var i = 0;i < items.length;i++){
if(items[i].checked){
ary[i] = document.getElementById(\"id\"+items[i].value).parentNode.parentNode.rowIndex;//保存下所选行的索引
moveValueOfLeft(items[i].value);//移值
}
}
for(var i = ary.length;i >0;i--){
var leftTbody = document.getElementById(\"tab_sendValue1\");
//左边表格的tbody
//判断数组ary里的值是不是行索引
if(!isNaN(ary[i-1])){
leftTbody.deleteRow(ary[i-1]-1);
//移除表格的所选行
}
}
document.getElementById(\"check_all\").checked = false;
//全选复选框置为false
}
//移动左边表格的值到右边表格
function moveValueOfLeft(op){
var wbid = document.getElementById(\"id\"+op).value;
var wbno = document.getElementById(\"no\"+op).value;
var destination = document.getElementById(\"des\"+op).value;
var status = document.getElementById(\"status\"+op).value;
var billingdate = document.getElementById(\"date\"+op).value;
var rightTbody = document.getElementById(\"tab_sendValue3\");
//右边表格的tbody
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\");
var td5 = document.createElement(\"td\");
var td6 = document.createElement(\"td\");
td1.innerHTML = \"<input type=\'checkbox\' id=\'check_one\' name=\'item1\' value=\'\"+wbid+\"\'>\";
td2.innerHTML = \"<input type=\'text\' id=\'id\"+wbid+\"\' value=\'\"+wbid+\"\'>\";
td3.innerHTML = \"<input type=\'text\' id=\'no\"+wbid+\"\' value=\'\"+wbno+\"\'>\";
td4.innerHTML = \"<input type=\'text\' id=\'des\"+wbid+\"\' value=\'\"+destination+\"\'>\";
td5.innerHTML = \"<input type=\'text\' id=\'status\"+wbid+\"\' value=\'\"+status+\"\'>\";
td6.innerHTML = \"<input type=\'text\' id=\'date\"+wbid+\"\' value=\'\"+billingdate+\"\'>\";
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
tr.appendChild(td6);
rightTbody.appendChild(tr);
}
//移动右边表格的值到左边表格
function sendValueToLeft(){
var ary1 = new Array();
var items = document.getElementsByName(\"item1\");
for(var i = 0;i < items.length;i++){
if(items[i].checked){
//先保存所选行的索引 在移除掉所选行
ary1[i] = document.getElementById(\"id\"+items[i].value).parentNode.parentNode.rowIndex;
//保存下所选行的索引
moveValueOfRight(items[i].value);//移值
}
}
for(var i = ary1.length;i >0;i--){
var rightTbody = document.getElementById(\"tab_sendValue3\");
//右边表格的tbody
//判断数组ary里的值是不是行索引
if(!isNaN(ary1[i-1])){
rightTbody.deleteRow(ary1[i-1]-1);
//移除表格的所选行
}
}
document.getElementById(\"check_all3\").checked = false;
//全选复选框置为false
}
//移动右边表格的值到左边表格
function moveValueOfRight(op){
var wbid = document.getElementById(\"id\"+op).value;
var wbno = document.getElementById(\"no\"+op).value;
var destination = document.getElementById(\"des\"+op).value;
var status = document.getElementById(\"status\"+op).value;
var billingdate = document.getElementById(\"date\"+op).value;
var leftTbody = document.getElementById(\"tab_sendValue1\");
//左边表格的tbody
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\");
var td5 = document.createElement(\"td\");
var td6 = document.createElement(\"td\");
td1.innerHTML = \"<input type=\'checkbox\' id=\'check_one\' name=\'item\' value=\'\"+wbid+\"\'>\";
td2.innerHTML = \"<input type=\'text\' id=\'id\"+wbid+\"\' value=\'\"+wbid+\"\'>\";
td3.innerHTML = \"<input type=\'text\' id=\'no\"+wbid+\"\' value=\'\"+wbno+\"\'>\";
td4.innerHTML = \"<input type=\'text\' id=\'des\"+wbid+\"\' value=\'\"+destination+\"\'>\";
td5.innerHTML = \"<input type=\'text\' id=\'status\"+wbid+\"\' value=\'\"+status+\"\'>\";
td6.innerHTML = \"<input type=\'text\' id=\'date\"+wbid+\"\' value=\'\"+billingdate+\"\'>\";
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
tr.appendChild(td6);
leftTbody.appendChild(tr);
}
</script>
</head>
<body onload=\"myLoad()\">
<div id=\"main\">
<div id=\"div1\">
<div >
<div>
<input id=\"btn1\" type=\"button\" value=\"查未配载单\" onclick=\"window.location.href=\'${webroot }/waybill/find.do\';\"/>
<input id=\"btn2\" type=\"button\" value=\"筛选未配载\" />
<input id=\"btn3\" type=\"button\" value=\"清除\" />
<input id=\"btn4\"type=\"button\" value=\"还原\" />
</div>
<div>自营路线：<select><option>长沙</option></select></div>
</div>
<input id=\"btn_1\" type=\"button\" value=\"未配载托运单\" onclick=\"fun(\'tab_1\');\">
<input id=\"btn_2\" type=\"button\" value=\"已清除托运单\" onclick=\"fun(\'tab_2\');\">
<!-- 表格1 -->
<div id=\"tab1\">
<table border=\"1\" id=\"waybillTable\">
<thead>
<tr>
<th>全选<input type=\"checkbox\" id=\"check_all\" onclick=\"myclick(this,\'item\');\"></th>
<th>托运单号</th>
<th>货号</th>
<th>目的地</th>
<th>状态</th>
<th>托运日期</th>
</tr>
</thead>
<tbody id=\"tab_sendValue1\">
<tr>
<td><input type=\"checkbox\" id=\"check_one\" name=\"item\" value=\"2\"></td>
<td><input type=\"text\" id=\"id2\" value=\"2\"></td>
<td><input type=\"text\" id=\"no2\" value=\"89757\"></td>
<td><input type=\"text\" id=\"des2\" value=\"长沙\"></td>
<td><input type=\"text\" id=\"status2\" value=\"在库\"></td>
<td><input type=\"text\" id=\"date2\" value=\"ggyy\"></td>
</tr>
<tr>
<td><input type=\"checkbox\" id=\"check_one\" name=\"item\" value=\"3\"></td>
<td><input type=\"text\" id=\"id3\" value=\"3\"></td>
<td><input type=\"text\" id=\"no3\" value=\"007\"></td>
<td><input type=\"text\" id=\"des3\" value=\"长沙\"></td>
<td><input type=\"text\" id=\"status3\" value=\"在库\"></td>
<td><input type=\"text\" id=\"date3\" value=\"ggyy\"></td>
</tr>
<tr>
<td><input type=\"checkbox\" id=\"check_one\" name=\"item\" value=\"4\"></td>
<td><input type=\"text\" id=\"id4\" value=\"4\"></td>
<td><input type=\"text\" id=\"no4\" value=\"008\"></td>
<td><input type=\"text\" id=\"des4\" value=\"长沙\"></td>
<td><input type=\"text\" id=\"status4\" value=\"在库\"></td>
<td><input type=\"text\" id=\"date4\" value=\"ggyy\"></td>
</tr>
<tr>
<td><input type=\"checkbox\" id=\"check_one\" name=\"item\" value=\"5\"></td>
<td><input type=\"text\" id=\"id5\" value=\"5\"></td>
<td><input type=\"text\" id=\"no5\" value=\"009\"></td>
<td><input type=\"text\" id=\"des5\" value=\"长沙\"></td>
<td><input type=\"text\" id=\"status5\" value=\"在库\"></td>
<td><input type=\"text\" id=\"date5\" value=\"ggyy\"></td>
</tr>
</tbody>
</table>
</div>
</div>
<form action=\"/logistic7.2/loadingSet/save.do\" method=\"post\">
<div id=\"div2\">
<div>当前网点<br>
<select name=\"loadingsite\">
<option>长沙</option>
</select>
</div>
<div id=\"div2_2\"><input type=\"button\" value=\">>\" style=\"width:80px\" onclick=\"sendValueToRight();\" /></div>
<div id=\"div2_2\"><input type=\"button\" value=\"<<\" style=\"width:80px\" onclick=\"sendValueToLeft();\" /></div>
</div>
<div id=\"div3\">
<div>
<input id=\"button1\" type=\"button\" value=\"查已配载单 \" />
<input type=\"submit\" value=\"保存配载单\" id=\"mysubmit\"/><br>
到货网点：<input type=\"text\" name=\"destsite\" id=\"destsite\"><br>
车辆编号：<select id=\"vehicles\" name=\"vehicle.vid\">
<option>-----请选择-----</option>
</select>
到货时间:<input type=\"text\" name=\"planarrtime\" id=\"planarrtime\">
</div>
<!-- 表格3 -->
<div id=\"tab2\">
<table border=\"1\" width=\"100%\">
<thead>
<tr>
<th>全选<input type=\"checkbox\" id=\"check_all3\" onclick=\"myclick(this,\'item1\');\"></th>
<th>托运单号</th>
<th>货号</th>
<th>目的地</th>
<th>状态</th>
<th>托运日期</th>
</tr>
</thead>
<tbody id=\"tab_sendValue3\" name=\"tab_sendValue3\">
</tbody>
</table>
</div>
</div>
</form>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
本文地址：https://www.stayed.cn/item/8761
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)