Dynamically Add a table example written by yourself using Js

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. 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 ("<input name = 'dy _ hd_cpdm 'onpropertychange = 'textchange (this) 'Type = 'ddd'> ");
Var hidden2 = document. createElement ("<input name = 'dy _ hd_sx 'type = 'den den'> ");
Var hidden3 = document. createElement ("<input name = 'dy _ hd_mxid 'type = 'den den'> ");
Var hidden4 = document. createElement ("<input name = 'dy _ hd_rowstate' type = 'den den 'value = '1'>"); // row status
Var hidden5 = document. createElement ("<input name = 'dy _ hd_dj 'type = 'den den' value = '0'>"); // hide unit price
Var input1 = document. createElement ("<Input type = 'text' ondblclick = 'selectlj (this) 'style = 'width: 100px 'name = 'dy _ text_l0000'> ");
Var input2 = document. createElement ("<Input type = 'text' style = 'width: 100px 'name = 'dy _ text_cpmc '> ");
Var input3 = document. createElement ("<Input type = 'text' onKeyPress = 'onlynumberin1 (this) 'style = 'width: 40px 'value = '1' name = 'dy _ text_sl '> ");
Var input4 = document. createElement ("<Input type = 'text' onKeyPress = 'onlynumberin (this) 'style = 'width: 60px 'name = 'dy _ text_dj '> ");
Var input5 = document. createElement ("<Input type = 'text' style = 'width: 100px 'name = 'dy _ text_sccj '> ");
Var input6 = document. createElement ("<select name = 'dy _ select_clly '> ");
Var input7 = document. createElement ("<Input type = 'text' readonly = 'true' style = 'width: 40px 'name = 'dy _ text_glf'> ");
Var input8 = document. createElement ("<Input type = 'text' readonly = 'true' style = 'width: 60px 'name = 'dy _ text_je '> ");
Var input9 = document. createElement ("<Input type = 'button 'name = 'del 'value =' Delete 'class = 'input-click' onclick = 'delnode1 (this) '> ")
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
Copy codeThe Code is as follows:
<Table id = "Dy_table" width = "760" cellpadding = "0" style = "border-top: solid 1px # 9cf" class = "tableStyle" cellspacing = "0">
<Tr>
<Td> NO. <input id = "pageState" name = "pageState" type = "hidden" value = "0"/> <% -- page status -- %>
<Input id = "pageRows" name = "pageRows" type = "hidden" value = "1"/> <% -- total number of rows, including hidden -- %>
<Asp: HiddenField ID = "HF_tableRows" runat = "server" Value = "1"/> <% -- number of lines visible to users -- %>
</Td>
<Td> part number </td>
<Td> part name </td>
<Td> quantity </td>
<Td> unit price </td>
<Td> manufacturer </td>
<Td> material source </td>
<Td> Management Fee </td>
<Td> total </td>
<Td> operation </td>
</Tr>
<Tr> <td> 1 </td> <input name = 'dy _ text_l0000' style = 'width: 100px 'ondblclick = 'selectlj (this) 'onchange = 'textchange (this) 'type = 'text'/>
<Input name = 'dy _ hd_cpdm 'type = 'den den' onpropertychange = 'textchange (this) 'title = 'product Code'/>
<Input name = 'dy _ hd_sx 'type = 'den den' value = '1' title = 'internal sequence '/>
<Input name = 'dy _ hd_mxid 'type = 'den den' 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'/>
</Td> <input name = 'dy _ text_cpmc 'style = 'width: 100px 'onchange = 'textchange (this) 'Type = 'text'/> </td>
<Td> <input name = 'dy _ text_sl 'value = '1' onKeyPress = 'onlynumberin1 (this) 'onchange = 'textchange (this)' style = 'width: 40px 'Type = 'text'/> </td>
<Td> <input name = 'dy _ text_dj 'onKeyPress = 'onlynumberin (this)' onchange = 'textchange (this) 'style = 'width: 60px 'Type = 'text'/> <input name = 'dy _ hd_dj 'type = 'did' value = '0'/> </td>
<Td> <input name = 'dy _ text_sccj 'onchange = 'textchange (this) 'style = 'width: 100px 'Type = 'text'/> </td>
<Td> <select name = 'dy _ select_clly 'onchange = 'selectchange (this)'> <option value = 'contractor'> contract </option>
<Option value = 'purchased parts'> purchased parts </option> <option value = 'spare parts parts'> spare parts </option>
<Option value = 'factory provision'> factory providers' </option> </select> </td>
<Td> <input name = 'dy _ text_glf 'readonly = 'true' onchange = 'textchange (this)' style = 'width: 40px 'Type = 'text' value = '0. 00'/> </td>
<Td> <input name = 'dy _ text_je 'readonly = 'true' style = 'width: 60px 'Type = 'text'/> </td>
<Td> <input name = 'del 'type = 'button 'value =' Delete 'class = 'input-click' onclick = 'delnode1 (this) '/> </td> </tr>

</Table>

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!