Self-written dynamic table example compatible with FF and IE_javascript skills

The HTML table structure is as follows:

Copy code The code is as follows:

class="tableStyle1" cellspacing="0">

< ;th style="width: 40px">Serial number












< td>readonly='true' />title='Product Code' />name='Dy_hd_rowState' type='hidden' value='1' title='The status of the row' />type='hidden' value='0' title='Part Specifications' />

Part model	Part name	Quantity	Price without tax	Price with tax	Tax amount< ;/th>	Payment	Full amount	Actions
1		style='width: 35px' type='text' />		< ;/td>

The js code is as follows :

Copy code The 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, used to store the selected row, so the pop-up window Assign a value to this row in
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")//Special treatment for row status
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;//The 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;//Number of visible rows 1
table.rows[0].cells [0].getElementsByTagName("input")[0].value = table.rows.length;//Total number of rows, including hidden
var tbody=table.getElementsByTagName("tbody");
if( tbody!=null){
tbody[0].appendChild(tr);
}else
table.appendChild(tr);
}
//Event when deleted
function delnode(){
var table=document.getElementById("Dy_table");
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[1].value; //The number of rows visible to the user
var row; //Get 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=="")//New row When not written to the database, delete directly
{
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 it from the database, set the deletion mark
{
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 == ""){//When the new row is not written to the database, clear
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 it from the database, delete it 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();
}
//Events when deleting
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;//The number of rows visible to the user
var rowId=tr.cells[1].getElementsByTagName("input" )[2].value;
if( rowCount > 1 ){
if(rowId=="")//When the newly added row is not written to the database, delete it directly
{
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 the new row is not written to the database, clear it directly
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 it from the database, set a delete mark
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 when deleting from the middle Row number
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();
}
/ / Events that occur when modifying, change row status
function textChange(o){
var tr=o.parentElement.parentElement;
if(o.parentElement.parentElement.parentElement==null)return;/ /If it is a newly added row, return
var rowState = tr.cells[1].getElementsByTagName("input")[3].value;
if( rowState == "1")
return ;
else
tr.cells[1].getElementsByTagName("input")[3].value = "3";
setClf();
}
//Verification before submission data, ensuring 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("There are duplicate items in the parts section and cannot be saved! ");return false;}
}
}
return true;
}
var dialogWin;//Whether the parts window is open
//Select parts
function selectLj( o){
if(dialogWin == null){
selectRow = o.parentNode.parentNode;//Assign the row to the 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 previously written dynamically adding tables. The previous one was really just after I learned js. This is a failed work. Now it is finally compatible with FF and IE. During the process of compatibility, I did not miss the standard DOM specification and improved a lot of knowledge. When using JS DOM, you should pay attention to it when reading the MS DHTML manual. Are the methods and attributes mentioned in it standard? It is best to use standard ones.

This dynamic table can be dynamically increased or decreased as long as the table is set in HTML. You don’t need to care about how many tds it has. Pay attention to this. The related input hidden is added to the second td. Dynamic addition and deletion is only a superficial function. This table has a row status like the dataset, and the row status can be used to update, delete and add data on the server side. 1 New addition. , 2 deleted, 3 modified. Just using the pop-up window does not work in FF and IE7. I don’t know how it works with iframe.

Under IE, the cloned tr cannot be used to obtain the td collection, FF. The following is possible. Since there is input in tr and the onpropertychange event is used, it will also be triggered when the newly added input value in tr is removed, so an if is used in this event to eliminate this situation. Browser compatibility is really a bit troublesome. There is still a problem under FF. When the page is never submitted, when FF reloads the page, the value of the server-side control will be saved, but under IE, it is really reloaded, and any value on the page will be saved. Will not be retained. FF's behavior of saving server control values ​​should be a problem with its asp.net support. This should not happen without submitting the page.