JS實現兩表格里數據來回轉移的方法

2024-05-06 16:21:00

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了JS實現兩表格里數據來回轉移的方法,涉及javascript鼠標事件及頁面元素的相關操作技巧,需要的朋友可以參考下

本文實例講述了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');">



<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>



<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>