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"）; //右边表格的tbodyvar 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"）; //左边表格的tbodyvar 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程序设计有所帮助。