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

网络编程 2024/11/9 佚名

3 2 1

本文实例讲述了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程序设计有所帮助。

JS,表格,数据,转移

标签：

JS,表格,数据,转移

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“JS实现两表格里数据来回转移的方法”

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

暂无“JS实现两表格里数据来回转移的方法”评论...

www.imxmx.com 杰晶网络

8,675无损音乐

1,324高清电影

213破解软件

120,141站长资源

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

JS,表格,数据,转移

js实现发送验证码后的倒计时功能

原生JS和JQuery动态添加、删除表格行的方法

评论“JS实现两表格里数据来回转移的方法”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

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

JS,表格,数据,转移

js实现发送验证码后的倒计时功能

原生JS和JQuery动态添加、删除表格行的方法

评论“JS实现两表格里数据来回转移的方法”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存