Dynamic Add table example with JS _javascript tips for writing yourself

Source: Internet
Author: User
Tags rowcount
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!

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.