Dynamic table examples for FF and IE _javascript tips for self-writing

The table structure of HTML is as follows:

Copy Code code as follows:

<table id= "dy_table" width= "760" cellpadding= "0" style= "border-top:solid 1px #9cf"
class= "TableStyle1" cellspacing= "0" >
<tr>
<th style= "width:40px" > Serial number <input id= "pagerows" name= "pagerows" type= "hidden" value= "1"/>
<input type= "hidden" name= "Hf_tablerows" id= "Hf_tablerows" value= "1"/></th>
<th style= "width:120px" > Part model </th>
<th style= "width:130px" > part name </th>
<th style= "width:45px" > Quantity </th>
<th style= "width:70px" > No tax Price </th>
<th style= "width:70px" > Tax-included Price </th>
<th style= "width:70px" > Tax </th>
<th style= "width:70px" > Payment </th>
<th style= "width:70px" > Whole amount </th>
<th style= "width:60px" > Operations </th>
</tr>
<tr>
<td>1</td>
<td><input name= ' dy_text_ljh ' style= ' width:110px ' ondblclick= ' SELECTLJ ' (this) ' type= ' text '
Readonly= ' true '/><input name= ' dy_hd_cpdm ' type= ' hidden ' onpropertychange= ' textchange ' (This) '
Title= ' Product code '/><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 '/><input name= ' Dy_hf_ljgg '
Type= ' hidden ' value= ' 0 ' title= ' parts specification '/></td>
<td><input name= ' dy_text_cpmc ' style= ' width:120px ' readonly= ' true ' type= ' text '/></td>
<td><input name= ' dy_text_sl ' value= ' 1 ' onkeypress= ' onlyNumberIn1 (this) ' onkeyup= ' TextChange (This) '
Style= ' width:35px ' type= ' text '/></td>
<td><input name= ' dy_text_wsj ' style= ' width:60px ' type= ' text ' readonly= ' true '/></td>
<td><input name= ' dy_text_hsj ' style= ' width:60px ' type= ' text ' readonly= ' true '/></td>
<td><input name= ' dy_text_se ' style= ' width:60px ' type= ' text ' readonly= ' true '/></td>
<td><input name= ' dy_text_hk ' style= ' width:60px ' type= ' text ' readonly= ' true '/></td>
<td><input name= ' dy_text_ze ' style= ' width:60px ' type= ' text ' readonly= ' true '/></td>
<td><input name= ' del ' type= ' button ' value= ' delete ' class= ' Input-button ' onclick= ' delnode1 (this) '/&GT;&LT;/TD >
</tr>
</table>

The JS code is as follows:

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.rows[1].clonenode (true);
for (Var i=1;i<tr.childnodes.length-1;i++) {
For (Var p=0;p<tr.childnodes[i].getelementsbytagname ("Input"). length;p++) {
if (Tr.childnodes[i].getelementsbytagname ("input") [p].name== "dy_hd_rowstate")//Line State special treatment
Tr.childnodes[i].getelementsbytagname ("input") [p].value= "1";
Else
Tr.childnodes[i].getelementsbytagname ("input") [p].value=];
}
}
var rowcount = table.rows[0].cells[0].getelementsbytagname ("input") [1].value;//user visible number of rows
Tr.firstchild.innerhtml=parseint (rowcount) +1;
Table.rows[0].cells[0].getelementsbytagname ("input") [1].value = parseint (ROWCOUNT) +1;//number of visible rows +1
Table.rows[0].cells[0].getelementsbytagname ("input") [0].value = table.rows.length;//Total number of rows, containing hidden
var tbody=table.getelementsbytagname ("Tbody");
if (tbody!=null) {
Tbody[0].appendchild (TR);
}else
Table.appendchild (TR);
}
Events when deleted
function Delnode () {
var Table=document.getelementbyid ("Dy_table");
var rowcount = table.rows[0].cells[0].getelementsbytagname ("input") [1].value;//user visible number of rows
var row;//gets 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") [2].value;
if (RowCount > 1) {
if (rowid== "")/new row is not written to the database, delete directly
{
var tbody=table.getelementsbytagname ("Tbody");
if (tbody!=null) {
Tbody[0].removechild (row);
}else
Table.removechild (row);
Table.rows[0].cells[0].getelementsbytagname ("input") [1].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") [3].value = "2";
Table.rows[0].cells[0].getelementsbytagname ("input") [1].value = parseint (rowcount)-1;
}
}else{
if (rowId = = "") {//new row is not written to the database, empty
Row.cells[1].getelementsbytagname ("input") [0].value=];
Row.cells[1].getelementsbytagname ("input") [1].value=];
Row.cells[1].getelementsbytagname ("input") [2].value=];
Row.cells[1].getelementsbytagname ("input") [3].value=];
Row.cells[1].getelementsbytagname ("input") [4].value=];
Row.cells[2].getelementsbytagname ("input") [0].value=];
Row.cells[3].getelementsbytagname ("input") [0].value= "1";
Row.cells[4].getelementsbytagname ("input") [0].value=];
Row.cells[5].getelementsbytagname ("input") [0].value=];
Row.cells[6].getelementsbytagname ("input") [0].value=];
Row.cells[7].getelementsbytagname ("input") [0].value=];
Row.cells[8].getelementsbytagname ("input") [0].value=];
}else{//need to delete from the database, put on the delete tag
Row.style.display= "None";
Row.cells[1].getelementsbytagname ("input") [3].value = "2";
Table.rows[0].cells[0].getelementsbytagname ("input") [1].value = parseint (rowcount)-1;
AddNode ();
}
}
SETCLF ();
}
Events when deleted
function Delnode1 (o) {
var Tr=o.parentnode.parentnode;
var Table=document.getelementbyid ("Dy_table");
var rowcount = table.rows[0].cells[0].getelementsbytagname ("input") [1].value;//user visible number of rows
var rowid=tr.cells[1].getelementsbytagname ("Input") [2].value;
if (RowCount > 1) {
if (rowid== "")/new row is not written to the database, delete directly
{
var tbody=table.getelementsbytagname ("Tbody");
if (tbody!=null) {
Tbody[0].removechild (TR);
}else
Table.removechild (TR);
Table.rows[0].cells[0].getelementsbytagname ("input") [1].value = parseint (rowcount)-1;
}
Else
{
Tr.style.display= "None";
Tr.cells[1].getelementsbytagname ("input") [3].value = "2";
Table.rows[0].cells[0].getelementsbytagname ("input") [1].value = parseint (rowcount)-1;
}
}else{
if (rowid== "") {//new row is not written to the database, empty directly
Tr.cells[1].getelementsbytagname ("input") [0].value=];
Tr.cells[1].getelementsbytagname ("input") [1].value=];
Tr.cells[1].getelementsbytagname ("input") [2].value=];
Tr.cells[1].getelementsbytagname ("input") [3].value=];
Tr.cells[1].getelementsbytagname ("input") [4].value=];
Tr.cells[2].getelementsbytagname ("input") [0].value=];
Tr.cells[3].getelementsbytagname ("input") [0].value= "1";
Tr.cells[4].getelementsbytagname ("input") [0].value=];
Tr.cells[5].getelementsbytagname ("input") [0].value=];
Tr.cells[6].getelementsbytagname ("input") [0].value=];
Tr.cells[7].getelementsbytagname ("input") [0].value=];
Tr.cells[8].getelementsbytagname ("input") [0].value=];
}else{//need to delete from the database, put on the delete tag
Tr.style.display= "None";
Tr.cells[1].getelementsbytagname ("input") [3].value = "2";
Table.rows[0].cells[0].getelementsbytagname ("input") [1].value = parseint (rowcount)-1;
AddNode ();
}
}
The following loop is used to update the table line number when deleted from the middle
for (var i= 1,p = 1; i < table.rows.length; i++) {
if (table.rows[i].style.display!= "None")
{
table.rows[i].cells[0].innerhtml = p;
p++;
}
}
SETCLF ();
}
Events that occur at the time of modification, changing the row state
function TextChange (o) {
var tr=o.parentelement.parentelement;
if (o.parentelement.parentelement.parentelement==null) return;//is returned if it is a newly added row
var rowState = tr.cells[1].getelementsbytagname ("input") [3].value;
if (rowState = = "1")
Return
Else
Tr.cells[1].getelementsbytagname ("input") [3].value = "3";
SETCLF ();
}
Validate data prior to submission to ensure no duplicate rows
function Checksamedata () {
var Table=document.getelementbyid ("Dy_table");
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 Var dialogwin;//part window is open
Selected parts
function Selectlj (o) {
if (Dialogwin = = null) {
SelectRow = o.parentnode.parentnode;//Assign rows to global variables
var cpxh = selectrow.cells[1].getelementsbytagname ("input") [0].value;
Dialogwin = Winopen (' selectlj.aspx?ljh= ' +cpxh);
window.open (".. /jddgl/select_lj.aspx?ljh= "+ Cpxh,window,
"Center:yes;dialogwidth:600px;dialogheight:400px;help:no;status:no;");
}
}
function Winopen (URL) {
return window.open (URL, ' selectlj ', ' resizable=1,status=0,menubar=0,scrollbars=1,height=400px,width=600px ');
}

Calculate costs in table
function Setclf () {}

This is to write the dynamic increase in the table before the improvement, before that is really learning JS not long time to do the failure of the work. Now this can finally be compatible with FF and IE. In the process of compatibility, no less to see the standard DOM specification, improve a lot of knowledge, JS Operation Dom to look at MS's DHTML manual when you should pay attention to the method and attributes mentioned in it is not standard, it is best to use the standard.

This dynamic table as long as the HTML set table can dynamically increase or decrease, do not care about how many TD it has, notice in the second TD plus related input hidden. Dynamic addition and deletion is just a surface function, this table and dataset have a row state, with row state can be on the server side of the data update, delete and Add. 1 Add, 2 Delete, 3 modify. Just use pop-up window in FF and IE7 effect is not good, do not know how the effect of the IFRAME.

IE for the clone out of the TR can not cells to get the set of TD, FF is OK. Since there is input in TR with the Onpropertychange event, it will also trigger when the input value is removed from the new TR, so an if is excluded from this event. Browser compatibility is a bit of a hassle. FF There is also a problem, from the absence of the submission page, FF reload the page, the server-side control value will be saved, and IE is true reload, the page will not retain any value. The behavior of the FF to save the server control value should be that it has a problem with asp.net support, which should not happen without submitting the page.