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

2024-12-05 04:41:19

本文实例讲述了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写的分页表格数据为json串

什么也不说了,直接上代码: 复制代码代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags" %> <% String path = request.getContextPath(); String ba
js表格排序实例分析（支持int,float,date,string四种数据类型）

本文实例讲述了js表格排序的方法.分享给大家供大家参考.具体如下: <html> <head> <title>SortTable2</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> var k=0; /**//*
js动态添加表格数据使用insertRow和insertCell实现

效果图: 代码: js动态添加表格数据_2.html 复制代码代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js动态添加表格数据_2
查询绑定数据岛的表格中的文本并修改显示方式的js代码

复制代码代码如下: <script language="JavaScript"> function findAll(s){ if(s.length==0){ alert("请输入查询关键字"); } s=encode(s); var TDs=document.all.DataT1.all.tags("TD"); var num=0; for(var i=0;i<TDs.length;i++){ var tdObj=TDs[i]
JS小功能(操作Table--动态添加删除表格及数据)实现代码

效果: 代码: 复制代码代码如下: <head runat="server"> <title></title> <style type="text/css"> tr { height: 30px; } </style> <script type="text/javascript">
Js表格万条数据瞬间加载实现代码

Js表格,万条数据瞬间加载在Ajax动态加载数据的实际应用中,大家都习惯了一种思维方式:一条数据创建一行. 于是如果数量大的时候,一次性要加载完数据的话,浏览器就会卡上半天受Flex的DataGrid控件的启发,在Flex的DataGrid控件中,展示数据的方法并不是有多少条数据就创建多少行,它最多只创建你在界面上所看到的十几二十行(假设为n行),如果数据多的话,在滚动过程中,会从数据中抽取你应该看到的这n行数据,重新展示在已经创建好的那n行控件中. 也就是说,Flex的DataGrid控件
JS实现表格数据各种搜索功能的方法

本文实例讲述了JS实现表格数据各种搜索功能.可忽略大小写,模糊搜索,多关键搜索.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onl
JS实现两表格里数据来回转移的方法

本文实例讲述了JS实现两表格里数据来回转移的方法.分享给大家供大家参考.具体分析如下: 最近做项目里用到了一个两个表格里数据的来回转移,用JS稍微做了下,界面也没有去弄很漂亮感觉写得有点繁琐了,有时间再改进哈 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml
vue.js+Element实现表格里的增删改查

新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element (http://element.eleme.io/#/zh-CN)来配合vue.js进行样式填充之前用过angularjs 用到后来发现越来越难学于是就决定用vue.js 下面就介绍一下vue.js应用在表格里的增删改查首先引入一下element的js <script src="plugins/element-ui/index.js"></script> 然后引入需要用到的vue
js遍历获取表格内数据的方法(必看)

本文将介绍如何使用js获取表格内某一单元格的内容,表格由table,tr,td等html标记组成.table表示表格,tr表示行,td表示行中列. 1.一般的表格结构如下 <table> <tr> <td>id</td> <td>name</td> </tr> <tr> <td>1</td> <td>fdipzone</td> </tr> <tr
C#高效比较两个DataTable数据差异化的方法实现

假如有两个DataTable表格分别是dt1,dt2,dt2中有些数据跟dt1一样,现在想找出dt2的数据在dt1中不存在的数据集(换句话也可以说dt2删除已经存在于dt1中的数据),传统思想可能直接用循环找差异,这种是非常低效的做法,数据量少无所谓,数据量大,简直要了程序猿老命,既然直接循环查找不可取,那么有没有高效一点的做法呢(废话,凑数字用,当然是有了),C# linq 中IEnumerable 提供了Expect(差集)的方法,众所周知,DataTable提供了AsEnumerable(
JS判断两个对象内容是否相等的方法示例

本文实例讲述了JS判断两个对象内容是否相等的方法.分享给大家供大家参考,具体如下: 我们知道,如果两个对象即使内容,JavaScript也会判断它们不相等.但是有时候,我们仅仅需要判断两个对象的内容是否相等.那么我们应该如何做到且考虑周全呢?比如说0和-0,null和undefined,是不相等的,NaN和NaN默认是不相等的.我写了一个isEqual方法,考虑到了诸多方面,代码如下: <!DOCTYPE html> <html> <head> <meta cha
JS实现控制表格行内容垂直对齐的方法

本文实例讲述了JS实现控制表格行内容垂直对齐的方法.分享给大家供大家参考.具体分析如下: 下面的代码通过表格的vAlign属性控制表格行的内容垂直对齐,可以置顶.可以居中.可以底部对齐 <!DOCTYPE html> <html> <head> <script> function topAlign() { document.getElementById('tr2').vAlign="top"; } </script> <
js动态修改表格行colspan列跨度的方法

本文实例讲述了js动态修改表格行colspan列跨度的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script> function setColSpan() { var x=document.getElementById('myTable').rows[0].cells; x[0].colSpan="2"; x[1].colSpan="6"; } </sc
js实现类似jquery里animate动画效果的方法

本文实例讲述了js实现类似jquery里animate动画效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现鼠标移上,先宽度变化,再高度变化,最后透明度变化,鼠标移出,再依次变回去的效果. 要点一: startrun(obj,attr,target,fn) box.onmouseover = function(){ startrun(box,"width",200,function(){ startrun(box,"height",200,functio
JS实现网页表格自动变大缩小的方法

本文实例讲述了JS实现网页表格自动变大缩小的方法.分享给大家供大家参考.具体分析如下: 这就是一个个性的动态表格效果代码,网页中的表格自动放大或者缩小,不停的变化主要就是一个强调显示的作用复制代码代码如下: <HTML> <HEAD> <TITLE>js会动的表格</TITLE> <META content="text/html; charset=hz-gb-2312" http-equiv=Content-Type>
JS实现控制表格单元格垂直对齐的方法

本文实例讲述了JS实现控制表格单元格垂直对齐的方法.分享给大家供大家参考.具体如下: 下面的代码控制指定的单元格靠底部垂直对齐 <!DOCTYPE html> <html> <head> <script> function valignCell() { var x=document.getElementById('myTable').rows[0].cells; x[0].vAlign="bottom"; } </script>

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

相关推荐

随机推荐