JS實現(xiàn)兩表格里數(shù)據(jù)來回轉(zhuǎn)移的方法
更新時間：2015年05月28日 15:50:40 作者：jayqean
這篇文章主要介紹了JS實現(xiàn)兩表格里數(shù)據(jù)來回轉(zhuǎn)移的方法,涉及javascript鼠標(biāo)事件及頁面元素的相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)兩表格里數(shù)據(jù)來回轉(zhuǎn)移的方法。分享給大家供大家參考。具體分析如下：
最近做項目里用到了一個 兩個表格里數(shù)據(jù)的來回轉(zhuǎn)移,用JS稍微做了下,界面也沒有去弄很漂亮
感覺寫得有點繁瑣了,有時間再改進(jìn)哈
<!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
//判斷數(shù)組ary里的值是不是行索引
if(!isNaN(ary[i-1])){
leftTbody.deleteRow(ary[i-1]-1);
//移除表格的所選行
}
}
document.getElementById("check_all").checked = false;
//全選復(fù)選框置為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
//判斷數(shù)組ary里的值是不是行索引
if(!isNaN(ary1[i-1])){
rightTbody.deleteRow(ary1[i-1]-1);
//移除表格的所選行
}
}
document.getElementById("check_all3").checked = false;
//全選復(fù)選框置為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="未配載托運(yùn)單" onclick="fun('tab_1');">
<input id="btn_2" type="button" value="已清除托運(yùn)單" 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>托運(yùn)單號</th>
<th>貨號</th>
<th>目的地</th>
<th>狀態(tài)</th>
<th>托運(yùn)日期</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>當(dāng)前網(wǎng)點<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>
到貨網(wǎng)點：<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>托運(yùn)單號</th>
<th>貨號</th>
<th>目的地</th>
<th>狀態(tài)</th>
<th>托運(yùn)日期</th>
</tr>
</thead>
<tbody id="tab_sendValue3" name="tab_sendValue3">
</tbody>
</table>
</div>
</div>
</form>
</div>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
javascript中replace()在javascript中，String的函數(shù)replace()簡直太讓人喜愛了。它靈活而強(qiáng)大的字符替換處理能力，讓我不禁想向大家介紹它。2008-11-11
void(0)用于執(zhí)行某些處理，但是不整體刷新頁面的情況下，下面小編就給大家詳細(xì)介紹js中 javascript:void(0)的含義 ，需要的朋友可以參考下2015-08-08
最近做個項目，需要實現(xiàn)移動端左滑刪除功能，當(dāng)時js代碼將網(wǎng)上找的進(jìn)行刪減優(yōu)化，下面通過本文給大家分享基于JS實現(xiàn)移動端左滑刪除功能，感興趣的朋友一起看看2017-07-07
基于postman獲取動態(tài)數(shù)據(jù)過程詳解
這篇文章主要介紹了基于postman獲取動態(tài)數(shù)據(jù)過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了webpack文件打包錯誤異常,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07
為JavaScript類型增加方法的實現(xiàn)代碼(增加功能)
大家在js開發(fā)過程中有些功能已經(jīng)滿足不了我們的需求，或沒有我們需要的功能，那么我們就可以自己擴(kuò)展下，個性化js2011-12-12
基于openlayers4實現(xiàn)點的擴(kuò)散效果
這篇文章主要為大家詳細(xì)介紹了基于openlayers4實現(xiàn)點的擴(kuò)散效果 ，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
JavaScript獲取客戶端計算機(jī)硬件及系統(tǒng)等信息的方法
本文為大家詳細(xì)介紹下如何使用JavaScript獲取客戶端計算機(jī)硬件及系統(tǒng)等信息，下面有個不錯的示例，感興趣的朋友可以參考下2014-01-01
這篇文章主要介紹了JS實現(xiàn)的3D拖拽翻頁效果,通過鼠標(biāo)事件結(jié)合時間函數(shù)動態(tài)操作頁面元素實現(xiàn)拖拽翻頁的效果,需要的朋友可以參考下2015-10-10
HTML頁面滾動時獲取離頁面頂部的距離2種實現(xiàn)方法
獲取離滾動頁面的頂部距離有兩種方法一是DOM；而是jquery，具體的實現(xiàn)如下，感興趣的朋友可以嘗試操作下2013-09-09