用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,tt(input1));
addEvent(input3,tt(input1));
addEvent(input4,tt(input1));
addEvent(input5,tt(input1));
addEvent(input6,ttt(input6));
addEvent(input7,tt(input1));
// addEvent(input8,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,衰!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


问题背景 最近小伙伴提了一个希望提高后台下拉列表可操作性的需求,原因是下拉列表选项过多,每次下拉选择比较费时费力且容易出错,硬着头皮啃了啃前端知识,网上搜寻了一些下拉列表实现的资料,这里总结一下。 P
// n位随机数生成 function randomNum(n) { let sString = &quot;&quot;; let strings = &quot;abcdefghijklmnopq
HTML是HyperText Markup Language的简称,中文名称:超文本标记语言,它是一种用于创建网页的 标准标记语言
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
JavaScript 是脚本语言,是一种解释性脚本语言(代码不进行预编译)
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 一名开发者或设计师通常可以在一秒内指出优秀的设计,但对于糟糕的设计只需最多半
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 Excel是我们办公中常用的工具 ,它几乎能为我们处理大部分数据,友好的交互
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/8-tips-for-an-awesome-sign
本文由葡萄城技术团队于博客园翻译并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 如果我们自己编写从URL中分析和提取元素的代码,那么有可能会比较痛苦
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/what-is-deno-and-will-it-r
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/4-reasons-to-use-sass-in-y
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/vuejs-3-0-0-beta-features-
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/sessionstorage-and-localst
一直以来,JavaScript使用数组和对象来定义和存放结构化数据, 在这篇文章中,我们将一起深挖另一种对象Map的一切,我们将会去了解它是什么、如何遍历、都包括什么属性和方法以及优缺点是什么。
由于CSS的出现,现在的网站风格已经与它们很早之前的样子有了很大的不同。CSS的出现为原本平平无奇的网页注入了活力。这也是网站的用户体验得到进一步进化的原因。这可能就是当今几乎所有的网站或多或少都在使
自苹果推出了iPhone应用商店以来,App成为了我们生活中不可或缺的一部分,而对于实体业务也是如此,现在各行业都在推出自己的App,但有没有人想过这样一种场景,如果自己的潜在客户还没有安装你的App
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/10-top-chrome-extensions-f
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/do-your-buttons-lead-or-mi
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 前段时间在开发【葡萄城社区】公众号时有一个功能是需要用网页授权认证地址生成二
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 HTML5的发展改变了互联网技术趋势,前端热度依旧不减,所以对于应用开发人员