首页
所有分类
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 相关文章推荐
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
JS动态添加Table的TR，TD实现方法
Jan 28 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
Vue.js组件使用开发实例教程
Nov 01 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
JavaScript随机数的组合问题案例分析
May 16 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
鉴频器(1) 灵敏度(1) 实习报告(1) 发烧友(1) RP-F11(1) 频率(1) 高放电路(1) 数调机(1) 手调机(1) 频偏(1)
You might like
两个强悍的php 图像处理类1
2009/06/15 PHP
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
让FireFox支持innerText的实现代码
2009/12/01 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
javascript中Function类型详解
2015/04/28 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
[02:12]打造更好的电竞完美世界：完美盛典回顾篇
2018/12/19 DOTA
python中的对象拷贝示例 python引用传递
2014/01/23 Python
基于python的多进程共享变量正确打开方式
2018/04/28 Python
python自动化生成IOS的图标
2018/11/13 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
python 内置模块详解
2019/01/01 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
领先的荷兰线上超市：荷兰之家Holland at Home（支持中文）
2021/01/21 全球购物
优秀士兵先进事迹
2014/02/06 职场文书
降消项目实施方案
2014/03/30 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
影视后期实训报告
2014/11/05 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
搞笑Gif：这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记