相容FF和IE的動態table範例自寫_javascript技巧

HTML的table架構如下：

複製程式碼 程式碼如下:

class="tableStyle1" cellspacing="0">
























table>

js程式碼如下：

複製程式碼 程式碼如下:

function addEvent (o,c,h){
if(o.attachEvent){
o.attachEvent('on' c,h);
}else{
o.addEventListener(c,h,false);
}
return true;
}
var selectRow;//頁級js變量，用來存被選中的行，好在彈出窗口中對該行賦值
function addnode(){
var table=document.getElementById("Dy_table");
var tr=table.rows[1].cloneNode(true);
for (var i=1;ifor(var p=0;pif(tr.childNodes[i].getElementsByTagName("input")[p].name=="Dy_hd_rowState")//行狀態特殊對待
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;//使用者可見的行數
tr.firstChild.innerHTML=parseInt(rowCount) 1;
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount) 1;//可見行數1
table.rows[0].cells [0].getElementsByTagName("input")[0].value = table.rows.length;//總行數，包含隱藏的
var tbody=table.getElementsByTagName("tbody");
if( tbody!=null){
tbody[0].appendChild(tr);
}else
table.appendChild(tr);
}
//刪除時的事件
function delnode(){
var table=document.getElementById("Dy_table");
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[1].value; //使用者可見的行數
var row;//取得最後一個可見的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=="")//新增的行未寫入資料庫時，直接刪除
{
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//需要從資料庫刪除的，置上刪除標記
{
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 == ""){//新增的行未寫入資料庫時，清空
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{//需要從資料庫刪除的，並置上刪除標記
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();
}
}
setClf();
}
}
setClf();
}
}
setClf();
}
}
setClf();
}
}
setClf();
}
//刪除時的事件
function delnode1(o){
var tr=o.parentNode.parentNode;
var table=document.getElementById("Dy_table");
var Count = table.rows[0].cells[0].getElementsByTagName("input")[1].value;//使用者可見的行數
var rowId=tr.cells[1].getElementsByTagName("input") [2].value;
if( rowCount > 1 ){
if(rowId=="")//新增的行未寫入資料庫時，直接刪除{ 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==""){//新增的行未寫入資料庫時，直接清空
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{//需要從資料庫刪除的，置上刪除標記
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();
}
}
//以下循環用於從中間刪除時更新表格行號
for( var i= 1,p = 1; i if(table.rows[i].style.display!="none")
{
table.rows[i].cells[0].innerHTML = p;
p ;
}
}
setClf();
}
//修改時發生的事件，改變行狀態
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();
}
//提交前驗證資料，保證沒有重複的行
function checkSameData(){
var table=document.getElementById("Dy_table");
for( var i= 1; i if(table.rows[i].style.display == "none"||table.rows[i].cells[1].getElementsByTagName("input")[1].value=="") continue;
for( var p= i 1; 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("零件部分存在重複的項，無法儲存！ ");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');
}

/ /計算table內費用
function setClf(){}

這算是對之前寫的動態增加表格的改進，之前那個實在是學習了js沒多久而作的失敗作品。裡面提到的方法和屬性是不是標準的，最好用標準的。第二個td裡面加上相關的input hidden。 ，2刪除，3修改。下則是可以。由於tr內有input用了onpropertychange事件，在去掉新增的tr內input值的時候也會觸發，所以在這個事件裡用一個if排除了這種情況。瀏覽器的相容還真是有些麻煩。 FF下面還存在一個問題，從沒有提交頁面的情況下，FF重新載入頁面的時候，伺服器端控制項的值會被儲存下來，而IE下則是真的重新載入，頁面上的任何值都不會保留。 FF的這個保存伺服器控制項值的行為應該是它對asp.net支援有問題，沒有提交頁面的情況下這是不應該發生的。

序號	零件型號	零件名稱	數量	無稅價	含稅金	稅金	貨款	整額	操作
1	readonly='true' />title='產品代碼' />name='Dy_hd_rowState' type='hidden' value='1' title='該行的狀態' />type='hidden' value='0' title='零件規格' />		style='width : 35px' type='text' />