管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

用Js实现的动态增加表格示例自己写的

复制代码 代码如下:

　　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)' 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='删 除' 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="合同件";

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

　　}

　　}

　　=======

　　前台页面

　　

复制代码 代码如下:

　　<table id="Dy_table" width="760" cellpadding="0" style=" border-top:solid 1px #9cf" class="tableStyle" cellspacing="0">

　　<tr>

　　<td>序号<input id="pageState" name="pageState" type="hidden" value="0" /> <%--页面状态--%>

　　<input id="pageRows" name="pageRows" type="hidden" value="1" /> <%--总行数，包括隐藏的--%>

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

　　</td>

　　<td>零件号</td>

　　<td>零件名称</td>

　　<td>数量</td>

　　<td>单价</td>

　　<td>生产厂家</td>

　　<td>材料来源</td>

　　<td>管理费</td>

　　<td>合计</td>

　　<td>操作</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='产品代码' />

　　<input name='Dy_hd_sx' type='hidden' value='1' title='内部顺序' />

　　<input name='Dy_hd_mxid' type='hidden' value='' title='该行的Id，用来修改和删除' />

　　<input name='Dy_hd_rowState' type='hidden' value='1' title='该行的状态' />

　　</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' type='text' /></td>

　　<td><select name='Dy_select_clly' onchange='selectChange(this)' ><option value='合同件'>合同件</option>

　　<option value='外购件'>外购件</option><option value='备件部'>备件部</option>

　　<option value='厂家供件'>厂家供件</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='删 除' class='input-button' onclick='delnode1(this)' /></td></tr>

　　</table>

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

教程首页 更多教程