Dynamic table example self-writing compatible with FF and IE

The table structure of HTML is as follows:
Copy codeThe Code 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"> NO. <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"> Part Model </th>
<Th style = "width: 130px"> part name </th>
<Th style = "width: 45px"> quantity </th>
<Th style = "width: 70px"> no tax price </th>
<Th style = "width: 70px"> tax-included price </th>
<Th style = "width: 70px"> Tax Amount </th>
<Th style = "width: 70px"> payment </th>
<Th style = "width: 70px"> integer </th>
<Th style = "width: 60px"> operation </th>
</Tr>
<Tr>
<Td> 1 </td>
<Td> <input name = 'dy _ text_l0000' style = 'width: 110px 'ondblclick = 'selectlj (this) 'type = 'text'
Readonly = 'true'/> <input name = 'dy _ hd_cpdm 'Type = 'den den 'onpropertychange = 'textchange (this )'
Title = 'product Code'/> <input name = 'dy _ hd_mxid' type = 'did' value = ''title = 'id of the row, used to modify and delete '/> <input
Name = 'dy _ hd_rowstate' type = 'den den 'value = '1' title = 'status of the row'/> <input name = 'dy _ hf_ljgg'
Type = 'siden' value = '0' title = 'parts'/> </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 'class = 'input-click' onclick = 'delnode1 (this) '/> </td>
</Tr>
</Table>

The js Code is as follows:
Copy codeThe 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 selected rows. Fortunately, this row is assigned a value in 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") // Special Treatment of row states
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 lines 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; // The total number of rows, including hidden
Var tbody = table. getElementsByTagName ("tbody ");
If (tbody! = Null ){
Tbody [0]. appendChild (tr );
} Else
Table. appendChild (tr );
}
// Deletion event
Function delnode (){
Var table = document. getElementById ("Dy_table ");
Var rowCount = table. rows [0]. cells [0]. getElementsByTagName ("input") [1]. value; // number of lines visible to the user
Var row; // obtain 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 the newly added row is not written to the database, delete it 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 // The tag to be deleted from the database.
{
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 the new row is 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 want to delete a 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 ();
}
// Deletion 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 lines 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, empty 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 want to delete a 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 cycle is used to update the table row number when the table is deleted from the center.
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 ();
}
// Changes the row status of an event that occurs during modification.
Function textChange (o ){
Var tr = o. parentElement. parentElement;
If (o. 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 ();
}
// Verify data before submission to ensure 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 the part, and cannot be saved! "); Return false ;}
}
}
Return true;
}
Var dialogWin; // whether the part window is opened
// Select a part
Function selectLj (o ){
If (dialogWin = null ){
SelectRow = o. parentNode. parentNode; // assign the row value 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 table fee
Function setClf (){}

This is an improvement on the dynamic addition of tables written earlier. The previous one was actually a failed piece of work that didn't take long to learn about js. Now it is compatible with FF and IE. In the process of compatibility, the standard dom specification has not been carefully read, and a lot of knowledge has been improved. When js operations on dom are reviewing the ms DHTML manual, pay attention to whether the methods and attributes mentioned in it are standard, it is best to use standard.

This dynamic table can be dynamically increased or decreased as long as the table is set in HTML. You don't need to worry about how many td it has. Add the relevant input den in the second td. Dynamic addition and deletion is just a surface function. This table has a row state like dataset. You can use the row state to update, delete, and add data on the server side. 1. Add, 2. delete, and 3. The pop-up window does not work in FF and IE7. I don't know how to use iframe.

In IE, the cloned tr cannot obtain the td set through cells, but in FF, it is OK. Since the onpropertychange event is used for input in tr, it will also be triggered when the input value in the newly added tr is removed. Therefore, this situation is ruled out with an if in this event. Browser compatibility is a little complicated. There is still a problem under FF. When FF re-loads the page without submitting the page, the server-side control value will be saved, in IE, it is actually re-loaded, and no value on the page will be retained. FF's behavior of saving the server control value should be due to its support for asp.net. This should not happen if the page is not submitted.