快捷導(dǎo)航

兼容FF和IE的動(dòng)態(tài)table示例自寫

更新時(shí)間：2013年10月21日 16:56:42 作者：

Js實(shí)現(xiàn)的動(dòng)態(tài)增加表格的文章有很多，但大多數(shù)都不兼容FF和IE，于是手寫了一個(gè)，經(jīng)測(cè)試效果還不錯(cuò)，特此與大家分享，感興趣的朋友不要錯(cuò)過(guò)

HTML的table結(jié)構(gòu)如下：

復(fù)制代碼代碼如下:

 
<table id="Dy_table" width="760" cellpadding="0" style="border-top: solid 1px #9cf" 
class="tableStyle1" cellspacing="0"> 
<tr> 
<th style="width: 40px">序號(hào)<input id="pageRows" name="pageRows" type="hidden" value="1" /> 
<input type="hidden" name="HF_tableRows" id="HF_tableRows" value="1" /></th> 
<th style="width:120px">零件型號(hào)</th> 
<th style="width:130px">零件名稱</th> 
<th style="width:45px">數(shù)量</th> 
<th style="width:70px">無(wú)稅價(jià)</th> 
<th style="width:70px">含稅價(jià)</th> 
<th style="width:70px">稅額</th> 
<th style="width:70px">貨款</th> 
<th style="width:70px">整額</th> 
<th style="width:60px">操作</th> 
</tr> 
<tr> 
<td>1</td> 
<td><input name='Dy_text_ljh' style='width: 110px' ondblclick='selectLj(this)' type='text' 
readonly='true' /><input name='Dy_hd_cpdm' type='hidden' onpropertychange='textChange(this)' 
title='產(chǎn)品代碼' /><input name='Dy_hd_mxid' type='hidden' value='' title='該行的Id，用來(lái)修改和刪除' /><input 
name='Dy_hd_rowState' type='hidden' value='1' title='該行的狀態(tài)' /><input name='Dy_hf_ljgg' 
type='hidden' value='0' title='零件規(guī)格' /></td> 
<td><input name='Dy_text_cpmc' style='width: 120px' readonly='true' type='text' /></td> 
<td><input name='Dy_text_sl' value='1' onkeypress='onlyNumberIn1(this)' onkeyup='textChange(this)' 
style='width: 35px' type='text' /></td> 
<td><input name='Dy_text_wsj' style='width: 60px' type='text' readonly='true' /></td> 
<td><input name='Dy_text_hsj' style='width: 60px' type='text' readonly='true' /></td> 
<td><input name='Dy_text_se' style='width: 60px' type='text' readonly='true' /></td> 
<td><input name='Dy_text_hk' style='width: 60px' type='text' readonly='true' /></td> 
<td><input name='Dy_text_ze' style='width: 60px' type='text' readonly='true' /></td> 
<td><input name='del' type='button' value='刪 除' class='input-button' onclick='delnode1(this)' /></td> 
</tr> 
</table> 

js代碼如下：

復(fù)制代碼代碼如下:

 
function addEvent (o,c,h){ 
if(o.attachEvent){ 
o.attachEvent('on'+c,h); 
}else{ 
o.addEventListener(c,h,false); 
} 
return true; 
} 
var selectRow;//頁(yè)面級(jí)js變量，用來(lái)存被選中的行，好在彈出窗口中對(duì)該行賦值 
function addnode(){ 
var table=document.getElementById("Dy_table"); 
var tr=table.rows[1].cloneNode(true); 
for(var i=1;i<tr.childNodes.length-1;i++){ 
for(var p=0;p<tr.childNodes[i].getElementsByTagName("input").length;p++){ 
if(tr.childNodes[i].getElementsByTagName("input")[p].name=="Dy_hd_rowState")//行狀態(tài)特殊對(duì)待 
tr.childNodes[i].getElementsByTagName("input")[p].value="1"; 
else 
tr.childNodes[i].getElementsByTagName("input")[p].value=""; 
} 
} 
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[1].value;//用戶可見的行數(shù) 
tr.firstChild.innerHTML=parseInt(rowCount)+1; 
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount)+1;//可見行數(shù)+1 
table.rows[0].cells[0].getElementsByTagName("input")[0].value = table.rows.length;//總行數(shù)，包含隱藏的 
var tbody=table.getElementsByTagName("tbody"); 
if(tbody!=null){ 
tbody[0].appendChild(tr); 
}else 
table.appendChild(tr); 
} 
//刪除時(shí)的事件 
function delnode(){ 
var table=document.getElementById("Dy_table"); 
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[1].value;//用戶可見的行數(shù) 
var row;//獲取最后一個(gè)可見的row 
for( var i=table.rows.length-1; i>=0 ;i--){ 
if(table.rows[i].style.display!="none") 
{ 
row=table.rows[i]; 
break; 
} 
} 
var rowId=row.cells[1].getElementsByTagName("input")[2].value; 
if( rowCount > 1 ){ 
if(rowId=="")//新增的行未寫入數(shù)據(jù)庫(kù)時(shí)，直接刪除 
{ 
var tbody=table.getElementsByTagName("tbody"); 
if(tbody!=null){ 
tbody[0].removeChild(row); 
}else 
table.removeChild(row); 
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount) - 1; 
} 
else//需要從數(shù)據(jù)庫(kù)刪除的，置上刪除標(biāo)記 
{ 
row.style.display="none"; 
row.cells[1].getElementsByTagName("input")[3].value = "2"; 
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount)-1; 
} 
}else{ 
if(rowId == ""){//新增的行未寫入數(shù)據(jù)庫(kù)時(shí)，清空 
row.cells[1].getElementsByTagName("input")[0].value=""; 
row.cells[1].getElementsByTagName("input")[1].value=""; 
row.cells[1].getElementsByTagName("input")[2].value=""; 
row.cells[1].getElementsByTagName("input")[3].value=""; 
row.cells[1].getElementsByTagName("input")[4].value=""; 
row.cells[2].getElementsByTagName("input")[0].value=""; 
row.cells[3].getElementsByTagName("input")[0].value="1"; 
row.cells[4].getElementsByTagName("input")[0].value=""; 
row.cells[5].getElementsByTagName("input")[0].value=""; 
row.cells[6].getElementsByTagName("input")[0].value=""; 
row.cells[7].getElementsByTagName("input")[0].value=""; 
row.cells[8].getElementsByTagName("input")[0].value=""; 
}else{//需要從數(shù)據(jù)庫(kù)刪除的，置上刪除標(biāo)記 
row.style.display="none"; 
row.cells[1].getElementsByTagName("input")[3].value = "2"; 
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount) - 1; 
addnode(); 
} 
} 
setClf(); 
} 
//刪除時(shí)的事件 
function delnode1(o){ 
var tr=o.parentNode.parentNode; 
var table=document.getElementById("Dy_table"); 
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[1].value;//用戶可見的行數(shù) 
var rowId=tr.cells[1].getElementsByTagName("input")[2].value; 
if( rowCount > 1 ){ 
if(rowId=="")//新增的行未寫入數(shù)據(jù)庫(kù)時(shí)，直接刪除 
{ 
var tbody=table.getElementsByTagName("tbody"); 
if(tbody!=null){ 
tbody[0].removeChild(tr); 
}else 
table.removeChild(tr); 
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount) - 1; 
} 
else 
{ 
tr.style.display="none"; 
tr.cells[1].getElementsByTagName("input")[3].value = "2"; 
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount) - 1; 
} 
}else{ 
if(rowId==""){//新增的行未寫入數(shù)據(jù)庫(kù)時(shí)，直接清空 
tr.cells[1].getElementsByTagName("input")[0].value=""; 
tr.cells[1].getElementsByTagName("input")[1].value=""; 
tr.cells[1].getElementsByTagName("input")[2].value=""; 
tr.cells[1].getElementsByTagName("input")[3].value=""; 
tr.cells[1].getElementsByTagName("input")[4].value=""; 
tr.cells[2].getElementsByTagName("input")[0].value=""; 
tr.cells[3].getElementsByTagName("input")[0].value="1"; 
tr.cells[4].getElementsByTagName("input")[0].value=""; 
tr.cells[5].getElementsByTagName("input")[0].value=""; 
tr.cells[6].getElementsByTagName("input")[0].value=""; 
tr.cells[7].getElementsByTagName("input")[0].value=""; 
tr.cells[8].getElementsByTagName("input")[0].value=""; 
}else{//需要從數(shù)據(jù)庫(kù)刪除的，置上刪除標(biāo)記 
tr.style.display="none"; 
tr.cells[1].getElementsByTagName("input")[3].value = "2"; 
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount) - 1; 
addnode(); 
} 
} 
//以下循環(huán)用于從中間刪除時(shí)更新表格行號(hào) 
for( var i= 1,p = 1; i < table.rows.length ;i++){ 
if(table.rows[i].style.display!="none") 
{ 
table.rows[i].cells[0].innerHTML = p; 
p++; 
} 
} 
setClf(); 
} 
//修改時(shí)發(fā)生的事件，改變行狀態(tài) 
function textChange(o){ 
var tr=o.parentElement.parentElement; 
if(o.parentElement.parentElement.parentElement==null)return;//如果是新增加的行則返回 
var rowState = tr.cells[1].getElementsByTagName("input")[3].value; 
if( rowState == "1") 
return; 
else 
tr.cells[1].getElementsByTagName("input")[3].value = "3"; 
setClf(); 
} 
//提交前驗(yàn)證數(shù)據(jù)，保證沒有重復(fù)的行 
function checkSameData(){ 
var table=document.getElementById("Dy_table"); 
for( var i= 1; i < table.rows.length ;i++){ 
if(table.rows[i].style.display == "none"||table.rows[i].cells[1].getElementsByTagName("input")[1].value=="") continue; 
for( var p= i + 1; p < table.rows.length ;p++){ 
if(table.rows[p].style.display == "none") continue; 
if(table.rows[i].cells[1].getElementsByTagName("input")[1].value.replace(/\s+$/g,"") == 
table.rows[p].cells[1].getElementsByTagName("input")[1].value.replace(/\s+$/g,"")) 
{alert("零件部分存在重復(fù)的項(xiàng)，不能保存！");return false;} 
} 
} 
return true; 
} 
var dialogWin;//零件窗口是否打開 
//選零件 
function selectLj(o){ 
if(dialogWin == null){ 
selectRow = o.parentNode.parentNode;//將行賦值給全局變量 
var cpxh = selectRow.cells[1].getElementsByTagName("input")[0].value; 
dialogWin = winOpen('selectLj.aspx?ljh='+cpxh); 
// window.open("../jddgl/Select_lj.aspx?ljh=" + cpxh,window, 
// "center:yes;dialogWidth:600px;dialogHeight:400px;help:no;status:no;"); 
} 
} 
function winOpen(url){ 
return window.open(url,'selectLj','resizable=1,status=0,menubar=0,scrollbars=1,height=400px,width=600px'); 
} 

//計(jì)算table內(nèi)費(fèi)用 
function setClf(){} 

這算是對(duì)之前寫的動(dòng)態(tài)增加表格的改進(jìn)，之前那個(gè)實(shí)在是學(xué)習(xí)了js沒多久而作的失敗作品?，F(xiàn)在這個(gè)總算是可以兼容FF和IE了。在兼容的過(guò)程中，沒少看標(biāo)準(zhǔn)dom規(guī)范，提高了不少知識(shí)，js操作dom翻看ms的DHTML手冊(cè)的時(shí)候要注意它里面提到的方法和屬性是不是標(biāo)準(zhǔn)的，最好用標(biāo)準(zhǔn)的。

此動(dòng)態(tài)table只要HTML里定好了table就可以動(dòng)態(tài)的增減，不用關(guān)心它有多少個(gè)td，注意在第二個(gè)td里面加上相關(guān)的input hidden。動(dòng)態(tài)增刪只是一個(gè)表面的功能，這個(gè)table和dataset一樣具有一個(gè)行狀態(tài)，用行狀態(tài)可以在服務(wù)器端對(duì)數(shù)據(jù)進(jìn)行更新、刪除和新增。1新增，2刪除，3修改。只是用彈出窗口在FF和IE7下效果不行，不知道用iframe效果怎么樣。

IE下對(duì)于clone出來(lái)的tr不能通過(guò)cells來(lái)獲取td的集合，F(xiàn)F下則是可以。由于tr內(nèi)有input用了onpropertychange事件，在去掉新增的tr內(nèi)input值的時(shí)候也會(huì)觸發(fā)，所以在這個(gè)事件里用一個(gè)if排除了這種情況。瀏覽器的兼容還真是有些麻煩。FF下面還存在一個(gè)問題，從沒有提交頁(yè)面的情況下，F(xiàn)F重新載入頁(yè)面的時(shí)候，服務(wù)器端控件的值會(huì)被保存下來(lái)，而IE下則是真的重新載入，頁(yè)面上的任何值都不會(huì)保留。FF的這個(gè)保存服務(wù)器控件值的行為應(yīng)該是它對(duì)asp.net支持存在問題，沒有提交頁(yè)面的情況下這是不應(yīng)該發(fā)生的。

您可能感興趣的文章: