FF and IE compatible dynamic table sample self writing

The table structure of HTML is as follows:

 
<table id="Dy_table" width="760" cellpadding="0" style="border-top: solid 1px #9cf" 
class="tableStyle1" cellspacing="0"> 
<tr> 
<th style="width: 40px"> The serial number <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"> Parts model </th> 
<th style="width:130px"> Part name </th> 
<th style="width:45px"> The number of </th> 
<th style="width:70px"> No tax price </th> 
<th style="width:70px"> Tax price </th> 
<th style="width:70px"> tax </th> 
<th style="width:70px"> Payment for goods </th> 
<th style="width:70px"> The whole amount </th> 
<th style="width:60px"> operation </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=' Product code ' /><input name='Dy_hd_mxid' type='hidden' value='' title=' The bank's Id For modification and deletion ' /><input 
name='Dy_hd_rowState' type='hidden' value='1' title=' State of the row ' /><input name='Dy_hf_ljgg' 
type='hidden' value='0' title=' Parts specifications ' /></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=' delete   In addition to ' class='input-button' onclick='delnode1(this)' /></td> 
</tr> 
</table> 

Js code is as follows:

 
function addEvent (o,c,h){ 
if(o.attachEvent){ 
o.attachEvent('on'+c,h); 
}else{ 
o.addEventListener(c,h,false); 
} 
return true; 
} 
var selectRow;//Page-level js variable that stores the selected row and assigns it to the pop-up window
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")//Line state special treatment
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;//Number of rows visible to the user
tr.firstChild.innerHTML=parseInt(rowCount)+1; 
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount)+1;//So we have rows plus 1
table.rows[0].cells[0].getElementsByTagName("input")[0].value = table.rows.length;//Total number of lines, including hidden
var tbody=table.getElementsByTagName("tbody"); 
if(tbody!=null){ 
tbody[0].appendChild(tr); 
}else 
table.appendChild(tr); 
} 
//Delete the event
function delnode(){ 
var table=document.getElementById("Dy_table"); 
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[1].value;//Number of rows visible to the user
var row;//Gets the last visible 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=="")//When new rows are not written to the database, they are deleted
{ 
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//If you need to delete from the database, set the delete tag
{ 
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 == ""){//Empty when new rows are not written to the database
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{//If you need to delete from the database, set the delete tag
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(); 
} 
//Delete the event
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;//Number of rows visible to the user
var rowId=tr.cells[1].getElementsByTagName("input")[2].value; 
if( rowCount > 1 ){ 
if(rowId=="")//When new rows are not written to the database, they are deleted
{ 
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==""){//When new rows are not written to the database, clean them up
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{//If you need to delete from the database, set the delete tag
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(); 
} 
} 
//The following loop is used to update the table row number when deleted from the middle
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(); 
} 
//Event that occurs when you modify, changing the state of the row
function textChange(o){ 
var tr=o.parentElement.parentElement; 
if(o.parentElement.parentElement.parentElement==null)return;//Returns if the row is newly added
var rowState = tr.cells[1].getElementsByTagName("input")[3].value; 
if( rowState == "1") 
return; 
else 
tr.cells[1].getElementsByTagName("input")[3].value = "3"; 
setClf(); 
} 
//Validate the data before committing to ensure that there are no duplicate rows
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(" Duplicate items exist in parts, cannot be saved! ");return false;} 
} 
} 
return true; 
} 
var dialogWin;//Is the part window open
//Selected parts
function selectLj(o){ 
if(dialogWin == null){ 
selectRow = o.parentNode.parentNode;//Assigns a row value to a global variable
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'); 
} 

//Calculate the cost in the table
function setClf(){} 

This is an improvement on the previous one (link: #), which was a failure after learning from js. Now this one is finally compatible with both FF and IE. In the process of compatibility, we have not looked at the standard dom specification, which has improved a lot of knowledge. When js operating dom, we should pay attention to whether the methods and properties mentioned in the DHTML manual of ms are standard, and it is better to use standard ones.

This dynamic table can be dynamically added or subtracted as long as the table is set in HTML. Don't care how many TDS there are in it. Dynamic addition and deletion is only a surface function, the table and dataset have a row state, with the row state can be updated on the server side of the data, delete and new. 1 new, 2 deleted, 3 modified. Just popup window in the FF and IE7 effect is not good, I do not know how to use iframe effect.

Under IE, tr from clone cannot get td set through cells, while under FF, it can. Since the onpropertychange event is used in the input in tr, it will also be triggered when the new input value in tr is removed, so an if is used in this event to exclude this situation. Browser compatibility is a bit of a hassle. Another problem with FF is that the values of the server-side controls are saved when FF reloads the page without the page being submitted, while the values of the server controls are actually reloaded under IE, and no values on the page are retained. The behavior of FF to save the server control value should be that it has a problem with asp.net support, which should not happen without submitting the page.