Add the _ javascript skills written by yourself in the table example dynamically using Js.

There are many ways to dynamically add tables, but most of them are complicated to implement. The example in this article is hand-written by the author. The test results are good, but it is not compatible with FF, if you are interested, refer 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 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. insertRow ();
Var cell0 = tr. insertCell ();
Var cell1 = tr. insertCell ();
Var cell2 = tr. insertCell ();
Var cell3 = tr. insertCell ();
Var cell4 = tr. insertCell ();
Var cell5 = tr. insertCell ();
Var cell6 = tr. insertCell ();
Var cell7 = tr. insertCell ();
Var cell8 = tr. insertCell ();
Var cell9 = tr. insertCell ();
Var hidden1 = document. createElement ("");
Var hidden2 = document. createElement ("");
Var hidden3 = document. createElement ("");
Var hidden4 = document. createElement (""); // Row status
Var hidden5 = document. createElement (""); // Hide unit price
Var input1 = document. createElement ("");
Var input2 = document. createElement ("");
Var input3 = document. createElement ("");
Var input4 = document. createElement ("");
Var input5 = document. createElement ("");
Var input6 = document. createElement ("");Var input7 = document. createElement ("");
Var input8 = document. createElement ("");
Var input9 = document. createElement ("")
Var oOption1 = document. createElement ("option ");
Var oOption2 = document. createElement ("option ");
Var oOption3 = document. createElement ("option ");
Var oOption4 = document. createElement ("option ");
Input6.options. add (oOption1 );
Input6.options. add (oOption2 );
Input6.options. add (oOption3 );
Input6.options. add (oOption4 );
OOption1.innerText = "contract ";
OOption1.value = "contractual items ";
OOption2.innerText = "purchased parts ";
OOption2.value = "purchased parts ";
OOption3.innerText = "Spare Parts Department ";
OOption3.value = "Spare Parts Department ";
OOption4.innerText = "factory supplies ";
OOption4.value = "manufacturer supplies ";
Var rowIndex;
RowIndex = table. rows. length-2;
Var rowCount = table. rows [0]. cells [0]. getElementsByTagName ("input") [2]. value; // number of lines visible to the user
Cell0.innerText = parseInt (rowCount) + 1;
Table. rows [0]. cells [0]. getElementsByTagName ("input") [2]. value = parseInt (rowCount) + 1;
Hidden2.value = parseInt (table. rows [0]. cells [0]. getElementsByTagName ("input") [1]. value) + 1;
Table. rows [0]. cells [0]. getElementsByTagName ("input") [1]. value = hidden2.value;
Cell1.appendChild (input1 );
Cell1.appendChild (hidden1); // product code
Cell1.appendChild (hidden2); // internal Sequence
Cell1.appendChild (hidden3); // the Id of the row to modify and delete.
Cell1.appendChild (hidden4); // status of the row
Cell2.appendChild (input2 );
Cell3.appendChild (input3 );
Cell4.appendChild (input4 );
Cell4.appendChild (hidden5 );
Cell5.appendChild (input5 );
Cell6.appendChild (input6 );
Cell9.appendChild (input9 );
Cell8.appendChild (input8 );
Cell7.appendChild (input7 );
Var tt = function (obj)
{
Return function () {textChange (obj );}
}
Var ttt = function (obj)
{
Return function () {selectChange (obj );}
}
AddEvent (input1, "change", tt (input1 ));
AddEvent (input2, "change", tt (input1 ));
AddEvent (input3, "change", tt (input1 ));
AddEvent (input4, "change", tt (input1 ));
AddEvent (input5, "change", tt (input1 ));
AddEvent (input6, "change", ttt (input6 ));
AddEvent (input7, "change", tt (input1 ));
// AddEvent (input8, "change", tt (input1 ));
}
Function delnode () // Delete event
{
Var table = document. getElementById ("Dy_table ");
Var rowCount = table. rows [0]. cells [0]. getElementsByTagName ("input") [2]. value; // number of lines visible to the user
Var row; // save 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") [3]. value;
If (rowCount> 1)
{
If (rowId = "") // when the newly added row is not written to the database, delete it directly.
{
Row. removeNode (true );
Table. rows [0]. cells [0]. getElementsByTagName ("input") [2]. value = parseInt (rowCount)-1;
}
Else // The tag to be deleted from the database.
{
Row. style. display = "none ";
Row. cells [1]. getElementsByTagName ("input") [4]. value = "2 ";
Table. rows [0]. cells [0]. getElementsByTagName ("input") [2]. value = parseInt (rowCount-1 );
}
}
Else
{
If (rowId = "") // empty when the new row is not written to the database
{
Row. cells. item (1). getElementsByTagName ("input") [0]. value = "";
Row. cells. item (1). getElementsByTagName ("input") [1]. value = "";
Row. cells. item (2). getElementsByTagName ("input") [0]. value = "";
Row. cells. item (3). getElementsByTagName ("input") [0]. value = "1 ";
Row. cells. item (4). getElementsByTagName ("input") [0]. value = "";
Row. cells. item (7). getElementsByTagName ("input") [0]. value = "";
Row. cells. item (5). getElementsByTagName ("input") [0]. value = "";
Row. cells. item (6). getElementsByTagName ("select") [0]. selectedIndex = 0;
}
Else // The tag to be deleted from the database.
{
Row. style. display = "none ";
Row. cells [1]. getElementsByTagName ("input") [4]. value = "2 ";
Table. rows [0]. cells [0]. getElementsByTagName ("input") [2]. value = parseInt (rowCount)-1;
Addnode ();
}
}
SetClf ();
}
Function delnode1 (o) // Delete event
{
Var tr = o. parentElement. parentElement;
Var table = document. getElementById ("Dy_table ");
Var rowCount = table. rows [0]. cells [0]. getElementsByTagName ("input") [2]. value; // number of lines visible to the user
Var rowId = tr. cells [1]. getElementsByTagName ("input") [3]. value;
If (rowCount> 1)
{
If (rowId = "") // when the newly added row is not written to the database, delete it directly.
{
Tr. removeNode (true );
Table. rows [0]. cells [0]. getElementsByTagName ("input") [2]. value = parseInt (rowCount)-1;
}
Else
{
Tr. style. display = "none ";
Tr. cells [1]. getElementsByTagName ("input") [4]. value = "2 ";
Table. rows [0]. cells [0]. getElementsByTagName ("input") [2]. value = parseInt (rowCount-1 );
}
}
Else
{
If (rowId = "") // when the new row is not written to the database, empty it directly.
{
Tr. cells. item (1). getElementsByTagName ("input") [0]. value = "";
Tr. cells. item (1). getElementsByTagName ("input") [1]. value = "";
Tr. cells. item (2). getElementsByTagName ("input") [0]. value = "";
Tr. cells. item (3). getElementsByTagName ("input") [0]. value = "1 ";
Tr. cells. item (4). getElementsByTagName ("input") [0]. value = "";
Tr. cells. item (7). getElementsByTagName ("input") [0]. value = "";
Tr. cells. item (5). getElementsByTagName ("input") [0]. value = "";
Tr. cells. item (6). getElementsByTagName ("select") [0]. selectedIndex = 0;
}
Else // The tag to be deleted from the database.
{
Tr. style. display = "none ";
Tr. cells [1]. getElementsByTagName ("input") [4]. value = "2 ";
Table. rows [0]. cells [0]. getElementsByTagName ("input") [2]. value = parseInt (rowCount)-1;
Addnode ();
}
}
// The following cycle is used to update the table row number when the table is deleted from the center.
RowCount = table. rows [0]. cells [0]. getElementsByTagName ("input") [2]. value;
For (var I = 1, p = 1; I <table. rows. length; I ++)
{
If (table. rows [I]. style. display! = "None ")
{
Table. rows [I]. cells [0]. innerText = p;
P ++;
}
}
SetClf ();
}
// Events that occur during Modification
Function textChange (o)
{
SetClf ();
Var tr = o. parentElement. parentElement;
Var rowState = tr. cells [1]. getElementsByTagName ("input") [4]. value;
If (rowState = "1 ")
Return;
Else
Tr. cells [1]. getElementsByTagName ("input") [4]. value = "3 ";
}
// In the drop-down box, if setClf () is changed, the calculated amount is not provided.
Function selectChange (o)
{
Var tr = o. parentElement. parentElement;
Var glf = tr. cells [7]. getElementsByTagName ("input") [0];
Var dj = tr. cells [4]. getElementsByTagName ("input") [0];
Var dj1 = tr. cells [4]. getElementsByTagName ("input") [1];
If (o. selectedIndex = 0) // Contract
{
Glf. value = '0. 00 ';
Dj. value = dj1.value;
SetClf ();
Return;
}
If (o. selectedIndex = 1) // purchased parts
{
Glf. value = '0. 20 ';
Dj. value = dj1.value;
SetClf ();
Return;
}
If (o. selectedIndex = 2) // spare part
{
Glf. value = '0. 00 ';
Dj. value = dj1.value;
SetClf ();
Return;
}
If (o. selectedIndex = 3) // factory supplies
{
Glf. value = '0. 00 ';
Dj. value = '0. 00 ';
Dj. readOnly = true;
SetClf ();
Return;
}
}
// Verify data before submission to ensure no duplicate rows
Function checkSameData ()
{
Var table = document. getElementById ("Dy_table ");
// Var rowCount = table. rows [0]. cells [0]. getElementsByTagName ("input") [2]. value; // number of lines visible to the user
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;
}
// Whether the part window is opened
Var dialogWin;
Function selectLj (o) // select a part
{
If (dialogWin = null)
{
SelectRow = o. parentElement. parentElement; // assign the row value to the global variable.
DialogWin = window. showModelessDialog ("../jddgl/Select_lj.aspx", window,
"Center: yes; dialogWidth: 550px; dialogHeight: 400px; help: no; status: no ;");
}
}

========
Front-end page

The Code is as follows:

Serial number<% -- Page status -- %> <% -- Total number of rows, including hidden -- %> <% -- Number of lines visible to the user -- %>	Part number	Part name	Quantity	Unit Price	Manufacturer	Material Source	Management Fee	Total	Operation
1						Contract Purchased partsSpare Parts Department Factory supply

The project needs this kind of function. I have used several methods before and after, and I think it is better (after all, I spent a lot of time writing it, huh, huh). js is not very skillful, hope that some friends can help improve and improve. Failed files, not compatible with FF, decline!