JS实现两表格里数据来回转移的方法
本文实例讲述了JS实现两表格里数据来回转移的方法。分享给大家供大家参考。具体分析如下：
最近做项目里用到了一个两个表格里数据的来回转移,用JS稍微做了下,界面也没有去弄很漂亮
感觉写得有点繁琐了,有时间再改进哈
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>提货送货</title>
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="thisismypage">
<styletype="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_sendValue1input,#tab_sendValue3input{
width:40px;
border:none;
}
</style>
<scripttype="text/javascript">
//全选事件
functionmyclick(e,itemName){
varitems=document.getElementsByName(itemName);
for(vari=0;i<items.length;i++){
items[i].checked=e.checked;
}
}
//移动左边表格的值到右边表格
functionsendValueToRight(){
varary=newArray();
varitems=document.getElementsByName("item");
for(vari=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(vari=ary.length;i>0;i--){
varleftTbody=document.getElementById("tab_sendValue1");
//左边表格的tbody
//判断数组ary里的值是不是行索引
if(!isNaN(ary[i-1])){
leftTbody.deleteRow(ary[i-1]-1);
//移除表格的所选行
}
}
document.getElementById("check_all").checked=false;
//全选复选框置为false
}
//移动左边表格的值到右边表格
functionmoveValueOfLeft(op){
varwbid=document.getElementById("id"+op).value;
varwbno=document.getElementById("no"+op).value;
vardestination=document.getElementById("des"+op).value;
varstatus=document.getElementById("status"+op).value;
varbillingdate=document.getElementById("date"+op).value;
varrightTbody=document.getElementById("tab_sendValue3");
//右边表格的tbody
vartr=document.createElement("tr");
vartd1=document.createElement("td");
vartd2=document.createElement("td");
vartd3=document.createElement("td");
vartd4=document.createElement("td");
vartd5=document.createElement("td");
vartd6=document.createElement("td");
td1.innerHTML="<inputtype='checkbox'id='check_one'name='item1'value='"+wbid+"'>";
td2.innerHTML="<inputtype='text'id='id"+wbid+"'value='"+wbid+"'>";
td3.innerHTML="<inputtype='text'id='no"+wbid+"'value='"+wbno+"'>";
td4.innerHTML="<inputtype='text'id='des"+wbid+"'value='"+destination+"'>";
td5.innerHTML="<inputtype='text'id='status"+wbid+"'value='"+status+"'>";
td6.innerHTML="<inputtype='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);
}
//移动右边表格的值到左边表格
functionsendValueToLeft(){
varary1=newArray();
varitems=document.getElementsByName("item1");
for(vari=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(vari=ary1.length;i>0;i--){
varrightTbody=document.getElementById("tab_sendValue3");
//右边表格的tbody
//判断数组ary里的值是不是行索引
if(!isNaN(ary1[i-1])){
rightTbody.deleteRow(ary1[i-1]-1);
//移除表格的所选行
}
}
document.getElementById("check_all3").checked=false;
//全选复选框置为false
}
//移动右边表格的值到左边表格
functionmoveValueOfRight(op){
varwbid=document.getElementById("id"+op).value;
varwbno=document.getElementById("no"+op).value;
vardestination=document.getElementById("des"+op).value;
varstatus=document.getElementById("status"+op).value;
varbillingdate=document.getElementById("date"+op).value;
varleftTbody=document.getElementById("tab_sendValue1");
//左边表格的tbody
vartr=document.createElement("tr");
vartd1=document.createElement("td");
vartd2=document.createElement("td");
vartd3=document.createElement("td");
vartd4=document.createElement("td");
vartd5=document.createElement("td");
vartd6=document.createElement("td");
td1.innerHTML="<inputtype='checkbox'id='check_one'name='item'value='"+wbid+"'>";
td2.innerHTML="<inputtype='text'id='id"+wbid+"'value='"+wbid+"'>";
td3.innerHTML="<inputtype='text'id='no"+wbid+"'value='"+wbno+"'>";
td4.innerHTML="<inputtype='text'id='des"+wbid+"'value='"+destination+"'>";
td5.innerHTML="<inputtype='text'id='status"+wbid+"'value='"+status+"'>";
td6.innerHTML="<inputtype='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>
<bodyonload="myLoad()">
<divid="main">
<divid="div1">
<div>
<div>
<inputid="btn1"type="button"value="查未配载单"onclick="window.location.href='${webroot}/waybill/find.do';"/>
<inputid="btn2"type="button"value="筛选未配载"/>
<inputid="btn3"type="button"value="清除"/>
<inputid="btn4"type="button"value="还原"/>
</div>
<div>自营路线：<select><option>长沙</option></select></div>
</div>
<inputid="btn_1"type="button"value="未配载托运单"onclick="fun('tab_1');">
<inputid="btn_2"type="button"value="已清除托运单"onclick="fun('tab_2');">
<!--表格1-->
<divid="tab1">
<tableborder="1"id="waybillTable">
<thead>
<tr>
<th>全选<inputtype="checkbox"id="check_all"onclick="myclick(this,'item');"></th>
<th>托运单号</th>
<th>货号</th>
<th>目的地</th>
<th>状态</th>
<th>托运日期</th>
</tr>
</thead>
<tbodyid="tab_sendValue1">
<tr>
<td><inputtype="checkbox"id="check_one"name="item"value="2"></td>
<td><inputtype="text"id="id2"value="2"></td>
<td><inputtype="text"id="no2"value="89757"></td>
<td><inputtype="text"id="des2"value="长沙"></td>
<td><inputtype="text"id="status2"value="在库"></td>
<td><inputtype="text"id="date2"value="ggyy"></td>
</tr>
<tr>
<td><inputtype="checkbox"id="check_one"name="item"value="3"></td>
<td><inputtype="text"id="id3"value="3"></td>
<td><inputtype="text"id="no3"value="007"></td>
<td><inputtype="text"id="des3"value="长沙"></td>
<td><inputtype="text"id="status3"value="在库"></td>
<td><inputtype="text"id="date3"value="ggyy"></td>
</tr>
<tr>
<td><inputtype="checkbox"id="check_one"name="item"value="4"></td>
<td><inputtype="text"id="id4"value="4"></td>
<td><inputtype="text"id="no4"value="008"></td>
<td><inputtype="text"id="des4"value="长沙"></td>
<td><inputtype="text"id="status4"value="在库"></td>
<td><inputtype="text"id="date4"value="ggyy"></td>
</tr>
<tr>
<td><inputtype="checkbox"id="check_one"name="item"value="5"></td>
<td><inputtype="text"id="id5"value="5"></td>
<td><inputtype="text"id="no5"value="009"></td>
<td><inputtype="text"id="des5"value="长沙"></td>
<td><inputtype="text"id="status5"value="在库"></td>
<td><inputtype="text"id="date5"value="ggyy"></td>
</tr>
</tbody>
</table>
</div>
</div>
<formaction="/logistic7.2/loadingSet/save.do"method="post">
<divid="div2">
<div>当前网点<br>
<selectname="loadingsite">
<option>长沙</option>
</select>
</div>
<divid="div2_2"><inputtype="button"value=">>"style="width:80px"onclick="sendValueToRight();"/></div>
<divid="div2_2"><inputtype="button"value="<<"style="width:80px"onclick="sendValueToLeft();"/></div>
</div>
<divid="div3">
<div>
<inputid="button1"type="button"value="查已配载单"/>
<inputtype="submit"value="保存配载单"id="mysubmit"/><br>
到货网点：<inputtype="text"name="destsite"id="destsite"><br>
车辆编号：<selectid="vehicles"name="vehicle.vid">
<option>-----请选择-----</option>
</select>
到货时间:<inputtype="text"name="planarrtime"id="planarrtime">
</div>
<!--表格3-->
<divid="tab2">
<tableborder="1"width="100%">
<thead>
<tr>
<th>全选<inputtype="checkbox"id="check_all3"onclick="myclick(this,'item1');"></th>
<th>托运单号</th>
<th>货号</th>
<th>目的地</th>
<th>状态</th>
<th>托运日期</th>
</tr>
</thead>
<tbodyid="tab_sendValue3"name="tab_sendValue3">
</tbody>
</table>
</div>
</div>
</form>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。