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

2024-05-06 16:21:00

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了JS实现两表格里数据来回转移的方法,涉及javascript鼠标事件及页面元素的相关操作技巧,需要的朋友可以参考下

本文实例讲述了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');">



<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>



<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>