JS 实现两表格里的数据来回转移

最新推荐文章于 2023-07-15 11:23:04 发布

原创最新推荐文章于 2023-07-15 11:23:04 发布 · 2.7k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#input #button #div #date #function

JS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的简单应用案例，该案例能够实现在两个表格间的数据互相转移功能。通过几个自定义函数，可以轻松地将一个表格中的选定数据转移到另一个表格中，并从源表格中删除已转移的数据。

最近做项目里用到了一个两个表格里数据的来回转移,用JS稍微做了下,界面也没有去弄很漂亮

感觉写得有点繁琐了,有时间再改进哈

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>提货送货</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <mce: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>