Dynamically Add a table example written by yourself using Js

Source: Internet
Author: User

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!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.