Use Js to dynamically add table examples written by myself_javascript skills

Copy code The 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 the selected row so that it can be displayed in the pop-up window Row assignment
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("");
var hidden2=document.createElement("");
var hidden3=document.createElement("");
var hidden4=document.createElement("");//Row status
var hidden5=document .createElement("");//Hide unit price
var input1=document.createElement("");
var input2=document.createElement("");
var input3=document.createElement("");
var input4=document.createElement("var input5=document.createElement("");
var input6=document.createElement( "");
var input7=document.createElement("");
var input8=document.createElement("");
var input9=document.createElement("")
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="Outsourced Parts";
oOption2.value="Outsourced Parts" ";
oOption3.innerText="Spare Parts Department";
oOption3.value="Spare Parts Department";
oOption4.innerText="Manufacturer supplied parts";
oOption4.value="Manufacturer supplied parts ";
var rowIndex;
rowIndex = table.rows.length-2;
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[2].value ;//The number of rows 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);//Id of this row, used to modify and delete
cell1.appendChild(hidden4);//Status of this 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()/ /Events when deleting
{
var table=document.getElementById("Dy_table");
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[2 ].value;//The number of rows 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//If you need to delete it from the database, set a delete mark
{
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 == "")//When the new row is not written to the database, clear it
{
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//If it needs to be deleted from the database, set a delete mark
{
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) //Events when deleting
{
var tr=o.parentElement.parentElement;
var table=document.getElementById("Dy_table");
var rowCount = table.rows[0]. cells[0].getElementsByTagName("input")[2].value;//The number of rows 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 newly added rows are not written to the database, clear them 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//If you need to delete it from the database, put it on 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 The loop is used to update the table row number when deleting from the middle
rowCount = table.rows[0].cells[0].getElementsByTagName("input")[2].value;
for( var i= 1, p = 1; i {
if(table.rows[i].style.display!="none")
{
table.rows [i].cells[0].innerText = p;
p ;
}
}
setClf();
}
//Events that occur when modified
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";
}
//The drop-down box option change setClf() calculates the amount, which is not given here
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)//Outsourced 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)//Manufacturer supply
{
glf.value='0.00';
dj.value='0.00';
dj.readOnly=true;
setClf ();
return;
}
}
//Verify data before submission to ensure there are no duplicate rows
function checkSameData()
{
var table=document.getElementById("Dy_table");
// var rowCount = table .rows[0].cells[0].getElementsByTagName("input")[2].value;//The number of rows visible to the user
for( var i= 1; i {
if(table.rows[i].style.display == "none"||table.rows[i].cells[1].getElementsByTagName("input")[1].value == "") continue;
for( var p= i 1; 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("There are duplicate items in the parts section , cannot be saved! ");return false;}
}
}
return true;
}
//Whether the parts window is open
var dialogWin;
function selectLj( o)//Select parts
{
if(dialogWin == null)
{
selectRow = o.parentElement.parentElement;//Assign the row to the global variable
dialogWin = window. showModelessDialog("../jddgl/Select_lj.aspx",window,
"center:yes;dialogWidth:550px;dialogHeight:400px;help:no;status:no;");
}
}

========
Front page

Copy code The code is as follows:

>


Total

Serial number	Part number	Part name	Quantity	Unit price	Manufacturer	Source of materials	Management fee	Operations
1						Contract Part Outsourced Part Spare Parts Department Manufacturer Supplied Parts< ;/td>

The project needs this function, and I have used several methods. I think this is better (after all, I spent a lot of time writing it, haha). I am not very proficient in js. I hope some friends can give me some advice. Help improve and improve. Failed work, not compatible with FF, bad!