用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("<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'>");//行状态

var hidden5=document.createElement("<input name='Dy_hd_dj' type='hidden' value='0'>");//隐藏单价

var input1=document.createElement("<Input type='text' ondblclick='selectLj(this)' name='Dy_text_ljh' >");

var input2=document.createElement("<Input type='text' name='Dy_text_cpmc' >");

var input3=document.createElement("<Input type='text' onKeyPress='onlyNumberIn1(this)' value='1' name='Dy_text_sl' >");

var input4=document.createElement("<Input type='text' onKeyPress='onlyNumberIn(this)' name='Dy_text_dj' >");

var input5=document.createElement("<Input type='text' name='Dy_text_sccj' >");

var input6=document.createElement("<select name='Dy_select_clly' >");

var input7=document.createElement("<Input type='text' readonly='true' name='Dy_text_glf' >");

var input8=document.createElement("<Input type='text' readonly='true' name='Dy_text_je' >");

var input9=document.createElement("<Input type='button' name='del' value='删除' 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="合同件";

oOption1.value="合同件";

oOption2.innerText="外购件";

oOption2.value="外购件";

oOption3.innerText="备件部";

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.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()//删除时的事件

{

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 < table.rows.length ;i++)

{

if(table.rows[i].style.display!="none")

{

table.rows[i].cells[0].innerText = p;

p++;

}

setClf();

}

//修改时发生的事件

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.selectedIndex==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 < 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("零件部分存在重复的项，不能保存！");return false;}

}

return true;

}

//零件窗口是否打开

var dialogWin;

function selectLj(o)//选零件

{

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;");

}

=======

前台页面

复制代码代码如下:

<tr>

<asp:HiddenField ID="HF_tableRows" runat="server" Value="1" /> <%--用户可见行数--%>

</td>

</tr>

</td><td><input name='Dy_text_cpmc' onchange='textChange(this)' type='text' /></td>

</table>

项目需要这种功能，前前后后用了几种办法，我觉得还是这种比较好（毕竟是我花了蛮多时间写的，呵呵），js不怎么熟练，希望有朋友能指点帮助改进和提高。失败的作品，不兼容ＦＦ，衰！