首页
所有分类
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 相关文章推荐
javascript的console.log()用法小结
May 31 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
javascript 中的try catch应用总结
Apr 01 Javascript
从零开始学习Node.js系列教程三：图片上传和显示方法示例
Apr 13 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
原生js实现移动端Touch轮播图的方法步骤
Jan 03 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 Javascript
JavaScript实现简单图片切换
Apr 29 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) 移动开发(2) 装饰器(1) 循环(3) 二维数组(2) 安卓(1) 嵌套(1) translation(2) 分块(1) decorator(1)
You might like
laravel 4安装及入门图文教程
2014/10/29 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
javascript 面向对象编程基础：封装
2009/08/21 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
常用的javascript设计模式
2017/01/11 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）
2020/06/05 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
Python pip使用超时问题解决方案
2020/08/03 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
英国和世界各地预订便宜的酒店：LateRooms.com
2019/05/05 全球购物
某/etc/fstab文件中的某行如下： /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
加强干部作风建设整改方案
2014/10/24 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书
诺贝尔奖获得者名言100句：句句启人心智，值永久收藏
2019/08/09 职场文书
Python socket如何解析HTTP请求内容
2022/02/12 Python
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js
mysql 排序失效
2022/05/20 MySQL