首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMay 28, 2015

本文实例讲述了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实现两表格里数据来回转移的方法

- Author -

jayqean

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 Javascript
非jQuery实现照片散落桌子上，单击放大的LightBox效果
Nov 28 Javascript
详解angular2采用自定义指令（Directive）方式加载jquery插件
Feb 09 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 #Javascript
jQuery实现html表格动态添加新行的方法
May 28 #Javascript
jquery实现用户打分评分特效
May 28 #Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 #Javascript
javascript转换静态图片，增加粒子动画效果
May 28 #Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 #Javascript
javascript实现行拖动的方法
May 27 #Javascript
AGC(1) 原神(1) 模拟人生(1) ICF-903L(1) 死亡搁浅(1) 74HC4066(1) YB-230(1) BCLer(1) FS1016(1) 大话西游(1)
You might like
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
jQuery ajax BUG：object doesn't support this property or method
2010/07/06 Javascript
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
微信小程序 图片上传实例详解
2017/05/05 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
一份python入门应该看的学习资料
2018/04/11 Python
Django配置celery（非djcelery）执行异步任务和定时任务
2018/07/16 Python
浅谈python锁与死锁问题
2020/08/14 Python
澳大利亚排名第一的在线酒类商店：MyBottleShop
2018/04/26 全球购物
荷兰睡眠专家：Beter Bed
2020/11/23 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
图书室管理制度
2014/01/19 职场文书
十佳大学生事迹材料
2014/01/29 职场文书
财务负责人任命书
2014/06/06 职场文书
读群众路线的心得体会
2014/09/03 职场文书
结婚堵门保证书
2015/05/08 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers