首页
所有分类
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 页面全选框实践代码
Apr 02 Javascript
Javascript玩转继承(一)
May 08 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
js判断上传文件后缀名是否合法
Jan 28 Javascript
基于jquery编写分页插件
Mar 07 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
js判断鼠标移入移出方向的方法
Jun 24 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
pycryto(1) kafka(2) axios(1) shell脚本(1) 高动态范围(1) Vue3(1) HDR(1) 连接器(1) 数据加密(1) 曝光融合(1)
You might like
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
PHP采集腾讯微博的实现代码
2012/01/19 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
jsonp原理及使用
2013/10/28 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么？
2017/02/10 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪？
2015/07/31 DOTA
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
专升本自我鉴定
2013/10/10 职场文书
优秀毕业生求职推荐信范文
2013/11/21 职场文书
商务主管岗位职责
2013/12/08 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
岗位职责说明书模板
2014/07/30 职场文书
学校端午节活动方案
2014/08/23 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
十七岁的单车观后感
2015/06/12 职场文书
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL