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


Posted in Javascript onOctober 21, 2013
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不怎么熟练,希望有朋友能指点帮助改进和提高。失败的作品,不兼容FF,衰!
Javascript 相关文章推荐
Javascript 错误处理的几种方法
Jun 13 Javascript
jquery键盘事件使用介绍
Nov 01 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
js中switch case循环实例代码
Dec 30 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 #Javascript
JS中的this变量的使用介绍
Oct 21 #Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 #Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 #Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 #Javascript
JS操作Cookie写入和读取实例代码
Oct 20 #Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 #Javascript
You might like
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
2017/02/02 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
使用JavaScript破解web
2018/09/28 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
python实现代码行数统计示例分享
2014/02/10 Python
Python中isnumeric()方法的使用简介
2015/05/19 Python
Python常见的pandas用法demo示例
2019/03/16 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
经典英文广告词
2014/03/18 职场文书
培训研修方案
2014/06/06 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
退货证明模板
2015/06/23 职场文书
详解MySQL的半同步
2021/04/22 MySQL