Dynamic Add table example with JS _javascript tips for writing yourself

Copy Code code 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 save the selected rows, and to assign values to the row 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= ' hidden ') > ");
var hidden2=document.createelement ("<input name= ' dy_hd_sx ' type= ' hidden ' >");
var hidden3=document.createelement ("<input name= ' dy_hd_mxid ' type= ' hidden ' >");
var hidden4=document.createelement ("<input name= ' dy_hd_rowstate ' type= ' hidden ' value= ' 1 ' >");//Line status
var hidden5=document.createelement ("<input name= ' dy_hd_dj ' type= ' hidden ' value= ' 0 ' >");/hidden Unit Price
var input1=document.createelement ("<input type= ' text ' ondblclick= ' SELECTLJ (this) ' style= ' width:100px '" name= "Dy_ Text_ljh ' > ');
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-button ' 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 Parts";
ooption1.value= "Contract Parts";
ooption2.innertext= "Purchased Parts";
ooption2.value= "Purchased Parts";
ooption3.innertext= "spare parts Department";
Ooption3.value= "spare parts Department";
ooption4.innertext= "Manufacturers to provide pieces";
Ooption4.value= "Manufacturers to provide pieces";
var RowIndex;
RowIndex = table.rows.length-2;
var rowcount = table.rows[0].cells[0].getelementsbytagname ("input") [2].value;//user visible number of rows
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 Order
Cell1.appendchild (HIDDEN3);//ID of the row, used to modify and delete
Cell1.appendchild (HIDDEN4);/The status of the line
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;//user visible number of rows
var row;//saves 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== "")/new row is not written to the database, delete directly
{
Row.removenode (TRUE);
Table.rows[0].cells[0].getelementsbytagname ("input") [2].value = parseint (rowcount)-1;
}
else//need to delete from the database, put on the delete tag
{
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 the new row is not written to the database when the RowId = = "") is empty
{
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//need to delete from the database, put on the delete tag
{
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;//user visible number of rows
var rowid=tr.cells[1].getelementsbytagname ("Input") [3].value;
if (RowCount > 1)
{
if (rowid== "")/new row is not written to the database, delete 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== "")/new row is not written to the database, empty 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//need to delete from the database, put on the delete tag
{
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 loop is used to update the table line number when deleted from the middle
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 when you modify
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";
}
Dropdown box option to change SETCLF () is the amount of the calculation, which does not give out
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 Parts
{
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 parts Department
{
Glf.value= ' 0.00 ';
Dj.value=dj1.value;
SETCLF ();
Return
}
if (o.selectedindex==3)//Manufacturers Supply parts
{
Glf.value= ' 0.00 ';
Dj.value= ' 0.00 ';
Dj.readonly=true;
SETCLF ();
Return
}
}
Validate data prior to 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;//user visible number of rows
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 ("Part of part has duplicate items and cannot be saved!") "); return false;}
}
}
return true;
}
Whether the part window is open
var Dialogwin;
function Selectlj (o)/SELECT part
{
if (Dialogwin = null)
{
SelectRow = o.parentelement.parentelement;//Assign rows to global variables
Dialogwin = Window.showmodelessdialog (".. /jddgl/select_lj.aspx ", window,
"Center:yes;dialogwidth:550px;dialogheight:400px;help:no;status:no;");
}
}

=======
Front Page

Copy Code code as follows:

<table id= "dy_table" width= "760" cellpadding= "0" style= "border-top:solid 1px #9cf" class= "TableStyle" cellspacing= " 0 ">
<tr>
<td> serial number <input id= "pagestate" name= "pagestate" type= "hidden" value= "0"/> <%--page Status--%>
<input id= "PageRows" name= "pagerows" type= "hidden" value= "1"/> <%--total rows, including hidden--%>
<asp:hiddenfield id= "hf_tablerows" runat= "Server" value= "1"/> <%--of user visible rows--%>
</td>
<td> Part number </td>
<td> part name </td>
<td> Quantity </td>
<td> Price </td>
<td> manufacturer </td>
<td> Material Sources </td>
<td> Management fee </td>
<td> Total </td>
<td> Operations </td>
</tr>
<tr><td>1</td><td><input name= ' dy_text_ljh ' style= ' width:100px ' ondblclick= selectLj ' ( This) ' onchange= ' TextChange (this) ' type= ' text '/>
<input name= ' dy_hd_cpdm ' type= ' hidden ' onpropertychange= ' textchange (this) ' title= ' Product code '/>
<input name= ' dy_hd_sx ' type= ' hidden ' value= ' 1 ' title= ' internal order '/>
<input name= ' dy_hd_mxid ' type= ' hidden ' value= ' title= ' the ID of the line used to modify and delete '/>
<input name= ' dy_hd_rowstate ' type= ' hidden ' value= ' 1 ' title= ' the state of the line '/>
</td><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= ' hidden ' value= ' 0 '/></td>
<td><input name= ' dy_text_sccj ' onchange= ' TextChange (this) ' style= ' width:100px ' the type= ' text '/></td >
<td><select name= ' dy_select_clly ' onchange= ' Selectchange (this) ' ><option value= ' contract ' > contract Parts </ Option>
<option value= ' purchased parts ' > purchased parts </option><option value= ' spare parts ' > Spares dept </option>
<option value= ' manufacturer for parts ' > manufacturers ' supply </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-button ' onclick= ' delnode1 (this) '/&GT;&LT;/TD ></tr>

</table>

Project needs this function, and then used several methods, I think this is better (after all, I spent quite a bit of time to write, hehe), JS is not skilled, I hope friends can help improve and improve. Failed works, not compatible with FF, fade!