JS实现两表格里数据来回转移的方法
本文实例讲述了JS实现两表格里数据来回转移的方法。分享给大家供大家参考。具体分析如下:
最近做项目里用到了一个两个表格里数据的来回转移,用JS稍微做了下,界面也没有去弄很漂亮
感觉写得有点繁琐了,有时间再改进哈
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>提货送货</title> <metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"> <metahttp-equiv="description"content="thisismypage"> <styletype="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_sendValue1input,#tab_sendValue3input{ width:40px; border:none; } </style> <scripttype="text/javascript"> //全选事件 functionmyclick(e,itemName){ varitems=document.getElementsByName(itemName); for(vari=0;i<items.length;i++){ items[i].checked=e.checked; } } //移动左边表格的值到右边表格 functionsendValueToRight(){ varary=newArray(); varitems=document.getElementsByName("item"); for(vari=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(vari=ary.length;i>0;i--){ varleftTbody=document.getElementById("tab_sendValue1"); //左边表格的tbody //判断数组ary里的值是不是行索引 if(!isNaN(ary[i-1])){ leftTbody.deleteRow(ary[i-1]-1); //移除表格的所选行 } } document.getElementById("check_all").checked=false; //全选复选框置为false } //移动左边表格的值到右边表格 functionmoveValueOfLeft(op){ varwbid=document.getElementById("id"+op).value; varwbno=document.getElementById("no"+op).value; vardestination=document.getElementById("des"+op).value; varstatus=document.getElementById("status"+op).value; varbillingdate=document.getElementById("date"+op).value; varrightTbody=document.getElementById("tab_sendValue3"); //右边表格的tbody vartr=document.createElement("tr"); vartd1=document.createElement("td"); vartd2=document.createElement("td"); vartd3=document.createElement("td"); vartd4=document.createElement("td"); vartd5=document.createElement("td"); vartd6=document.createElement("td"); td1.innerHTML="<inputtype='checkbox'id='check_one'name='item1'value='"+wbid+"'>"; td2.innerHTML="<inputtype='text'id='id"+wbid+"'value='"+wbid+"'>"; td3.innerHTML="<inputtype='text'id='no"+wbid+"'value='"+wbno+"'>"; td4.innerHTML="<inputtype='text'id='des"+wbid+"'value='"+destination+"'>"; td5.innerHTML="<inputtype='text'id='status"+wbid+"'value='"+status+"'>"; td6.innerHTML="<inputtype='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); } //移动右边表格的值到左边表格 functionsendValueToLeft(){ varary1=newArray(); varitems=document.getElementsByName("item1"); for(vari=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(vari=ary1.length;i>0;i--){ varrightTbody=document.getElementById("tab_sendValue3"); //右边表格的tbody //判断数组ary里的值是不是行索引 if(!isNaN(ary1[i-1])){ rightTbody.deleteRow(ary1[i-1]-1); //移除表格的所选行 } } document.getElementById("check_all3").checked=false; //全选复选框置为false } //移动右边表格的值到左边表格 functionmoveValueOfRight(op){ varwbid=document.getElementById("id"+op).value; varwbno=document.getElementById("no"+op).value; vardestination=document.getElementById("des"+op).value; varstatus=document.getElementById("status"+op).value; varbillingdate=document.getElementById("date"+op).value; varleftTbody=document.getElementById("tab_sendValue1"); //左边表格的tbody vartr=document.createElement("tr"); vartd1=document.createElement("td"); vartd2=document.createElement("td"); vartd3=document.createElement("td"); vartd4=document.createElement("td"); vartd5=document.createElement("td"); vartd6=document.createElement("td"); td1.innerHTML="<inputtype='checkbox'id='check_one'name='item'value='"+wbid+"'>"; td2.innerHTML="<inputtype='text'id='id"+wbid+"'value='"+wbid+"'>"; td3.innerHTML="<inputtype='text'id='no"+wbid+"'value='"+wbno+"'>"; td4.innerHTML="<inputtype='text'id='des"+wbid+"'value='"+destination+"'>"; td5.innerHTML="<inputtype='text'id='status"+wbid+"'value='"+status+"'>"; td6.innerHTML="<inputtype='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> <bodyonload="myLoad()"> <divid="main"> <divid="div1"> <div> <div> <inputid="btn1"type="button"value="查未配载单"onclick="window.location.href='${webroot}/waybill/find.do';"/> <inputid="btn2"type="button"value="筛选未配载"/> <inputid="btn3"type="button"value="清除"/> <inputid="btn4"type="button"value="还原"/> </div> <div>自营路线:<select><option>长沙</option></select></div> </div> <inputid="btn_1"type="button"value="未配载托运单"onclick="fun('tab_1');"> <inputid="btn_2"type="button"value="已清除托运单"onclick="fun('tab_2');"> <!--表格1--> <divid="tab1"> <tableborder="1"id="waybillTable"> <thead> <tr> <th>全选<inputtype="checkbox"id="check_all"onclick="myclick(this,'item');"></th> <th>托运单号</th> <th>货号</th> <th>目的地</th> <th>状态</th> <th>托运日期</th> </tr> </thead> <tbodyid="tab_sendValue1"> <tr> <td><inputtype="checkbox"id="check_one"name="item"value="2"></td> <td><inputtype="text"id="id2"value="2"></td> <td><inputtype="text"id="no2"value="89757"></td> <td><inputtype="text"id="des2"value="长沙"></td> <td><inputtype="text"id="status2"value="在库"></td> <td><inputtype="text"id="date2"value="ggyy"></td> </tr> <tr> <td><inputtype="checkbox"id="check_one"name="item"value="3"></td> <td><inputtype="text"id="id3"value="3"></td> <td><inputtype="text"id="no3"value="007"></td> <td><inputtype="text"id="des3"value="长沙"></td> <td><inputtype="text"id="status3"value="在库"></td> <td><inputtype="text"id="date3"value="ggyy"></td> </tr> <tr> <td><inputtype="checkbox"id="check_one"name="item"value="4"></td> <td><inputtype="text"id="id4"value="4"></td> <td><inputtype="text"id="no4"value="008"></td> <td><inputtype="text"id="des4"value="长沙"></td> <td><inputtype="text"id="status4"value="在库"></td> <td><inputtype="text"id="date4"value="ggyy"></td> </tr> <tr> <td><inputtype="checkbox"id="check_one"name="item"value="5"></td> <td><inputtype="text"id="id5"value="5"></td> <td><inputtype="text"id="no5"value="009"></td> <td><inputtype="text"id="des5"value="长沙"></td> <td><inputtype="text"id="status5"value="在库"></td> <td><inputtype="text"id="date5"value="ggyy"></td> </tr> </tbody> </table> </div> </div> <formaction="/logistic7.2/loadingSet/save.do"method="post"> <divid="div2"> <div>当前网点<br> <selectname="loadingsite"> <option>长沙</option> </select> </div> <divid="div2_2"><inputtype="button"value=">>"style="width:80px"onclick="sendValueToRight();"/></div> <divid="div2_2"><inputtype="button"value="<<"style="width:80px"onclick="sendValueToLeft();"/></div> </div> <divid="div3"> <div> <inputid="button1"type="button"value="查已配载单"/> <inputtype="submit"value="保存配载单"id="mysubmit"/><br> 到货网点:<inputtype="text"name="destsite"id="destsite"><br> 车辆编号:<selectid="vehicles"name="vehicle.vid"> <option>-----请选择-----</option> </select> 到货时间:<inputtype="text"name="planarrtime"id="planarrtime"> </div> <!--表格3--> <divid="tab2"> <tableborder="1"width="100%"> <thead> <tr> <th>全选<inputtype="checkbox"id="check_all3"onclick="myclick(this,'item1');"></th> <th>托运单号</th> <th>货号</th> <th>目的地</th> <th>状态</th> <th>托运日期</th> </tr> </thead> <tbodyid="tab_sendValue3"name="tab_sendValue3"> </tbody> </table> </div> </div> </form> </div> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。