用Js實現的動態增加表格範例自己寫的_javascript技巧

複製程式碼 程式碼如下:

function addEvent (o,c,h){
if(o.attachEvent){
o.attachEvent('on' c,h);
}else{
o.addEventListener(c,h,false);
}
return true;}
var selectRow;//頁級js變量，用來存被選中的行，好在彈出窗口中對該行賦值
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("");//行狀態
var hidden5=document.createElement("");//隱藏單價
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 oOption2=document.createElement("option");
var oOption2=document.createElement("option");
var oOption2=document.createElement("option");
var oOption2=document.createElement("option");
var oOption2=document.createElement("option");
var oOption2=document.createElement("option");
var oOption2=document.createElement("option");
var oOption2=document.createElement("option"); 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="合約零件";
oOption1.value="合約零件";
oOption2.innerText="外購件";
oOption2.value="外購件";
oOption3.innerText="備件部";
oOption3.value="備件部"; oOption3.value="備件部"; oOption4.innerText="廠商供件";
oOption4.value="廠商供品";
var rowIndex;
rowIndex = table.rows.length-2;
var rowCount = table .rows[0].cells[0].getElementsByTagName("input")[2].value;//使用者可見的行數
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);//產品代碼
cell1.appendChild(hidden2);//內部順序
cell1.appendChild(hidden3);//該行的Id，用來修改和刪除
cell1.appendChild(hidden4);//該行的狀態
cell2.appendChild(input2);
cell3.appendChild(input3);
cell4.appendChild(input4); cell4.appendChild(hidden5);
cell5.appendChild(input5);
cell6.appendChild(input6);
cell9.appendChild(input9);
cell8.appendendChild(inputappend; >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()//刪除時的事件
{
var table=document.getElementById("Dy_table");
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[2].value;//使用者可見的行數
var row;//儲存最後一個可見的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=="")/ /新增的行未寫入資料庫時，直接刪除
{
row.removeNode(true);
table.rows[0].cells[0].getElementsByTagName("input")[2 ].value = parseInt(rowCount) - 1;
}
else//需要從資料庫刪除的，置上刪除標記
{
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 == "")//新增的行未寫入資料庫時，清空
{
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//需要從資料庫刪除的，置上刪除標記
{
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)/ /刪除時的事件
{
var tr=o.parentElement.parentElement;
var table=document.getElementById("Dy_table");
var rowCount = table.rows[0].cells [0].getElementsByTagName("input")[2].value;//使用者可見的行數
var rowId=tr.cells[1].getElementsByTagName("input")[3].value;
if( rowCount > 1 )
{
if(rowId=="")//新增的行未寫入資料庫時，直接刪除
{
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=="")//新增的行未寫入資料庫時，直接清空
{
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//需要從資料庫刪除的，並置上刪除標記
{
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();
}
}
//以下循環使用從中間刪除時更新表格行號
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();
}
//修改時發生的事件
function textChange(>//修改時發生的事件
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";
}
//下拉框選項改變setClf()是計算金額的，這裡面沒有給出來
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)//合約零件
{
glf.value='0.00';
dj.value=dj1.value;
setClf();
return;
}
if( o.selectedIndex==1)//外購件
{
glf. value='0.20';
dj.value=dj1.value;
setClf();
return;
}
if( o.selectedIndex==2)//備件部
{
glf.value='0.00';
dj.value=dj1.value;
setClf();
return;
}
if( o.selecteddex= =3)//廠商供品
{
glf.value='0.00';
dj.value='0.00';
dj.readOnly=true;
setClf();
return;
} }
//提交前驗證數據，保證沒有重複的行
function checkSameData()
{
var table=document.getElementById("Dy_table");
// var rowCount = table .rows[0].cells[0].getElementsByTagName("input")[2].value;//使用者可見的行數
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("零件部分存在重複的項，不能儲存！ //選取零件
{
if(dialogWin == null)
{
selectRow = o.parentElement.parentElement;//將行賦值給全域變數
dialogWin = window.showModelessDialog( "../jddgl/Select_lj.aspx",window,
"center:yes;dialogWidth:550px;dialogHeight:400px;help:no;status:no;");
}
}
}


=======
前台頁

複製程式碼

程式碼如下:

序號	零件號碼	零件名稱 td>	數量	單價	生產廠家	材料來源	管理費	合計	操作
1						合約件 外購件 備件部 廠商供品		td>

專案需要這種功能，前後用了幾種辦法，我覺得還是這種比較好（畢竟是我花了蠻多時間寫的，呵呵），js不太熟練，希望有朋友能指點幫助改進和提高。失敗的作品，不相容ＦＦ，衰！