用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)' 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不怎么熟练，希望有朋友能指点帮助改进和提高。失败的作品，不兼容ＦＦ，衰！

时间： 2024-11-08 01:08:42

用Js实现的动态增加表格示例自己写的_javascript技巧的相关文章

JS通过ajax动态读取xml文件内容的方法_javascript技巧

本文实例讲述了JS通过ajax动态读取xml文件内容的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码读取note.xml文件,并填充显示相关字段 HTML文件代码如下 <!DOCTYPE html> <html> <head> <script> function loadXMLDoc(url) { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome,

js在指定位置增加节点函数insertBefore()用法实例_javascript技巧

本文实例讲述了js在指定位置增加节点函数insertBefore()用法.分享给大家供大家参考.具体分析如下: 函数原型如下: insertBefore(参数1,参数2):在指定位置添加节点具体代码如下: 复制代码代码如下: <html> <head> <script type="text/javascript"> function t(){ var nodeli = document.createElement('li');//创建一个li节

JS把内容动态插入到DIV的实现方法_javascript技巧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-

js遍历、动态的添加数据的小例子_javascript技巧

复制代码代码如下: function jsonObj(){ var person= {name: 'zhangsan',pass: '123' ,'sni.ni' : 'XMQ',back:function (){ for(var i=0;i<arguments.length;i++){ //在不知参数个数情况下可通过for循环遍历 // arguments这个是js 默认提供 alert("arr["+i

js 数组的for循环到底应该怎么写？_javascript技巧

然后来看看今天我开始怀疑哪个权威哦家伙了... 自从开始学编程,自从接触到数组这个东西,我就一直在不同的地点和不同的时间不断看到有人提醒:在用for遍历数组的时候一定要用 for(var i=0,n=arr2.length;i<n;i++)的方式哦,而不要用for(var i=0;i>arr.length;i++)的方式哦,因为用脑子想想也知道,第二种方法的第二部分会一直去计算数组的length,所以自然效率比较低. 哦?我们这里不说其他程序语言,而只讨论js,因为不同的语言,实现可能不同,其

Jquery 动态生成表格示例代码

在某些特殊的情况下是需要动态生成表格的,下面为大家详细介绍下使用jquery是如何做到的,感兴趣的朋友不要错过代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content

Jquery 动态生成表格示例代码_jquery

复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"

javascript实现动态增加删除表格行(兼容IE/FF)_javascript技巧

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>动态增删表格行</title> <script language="JavaScript"> <!-- //author:

js给select动态增加数据并由php接受保存到数据

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/1999/xhtml"> <head> <meta http-equiv="conte

猜你喜欢

Android输入法框的梳理

原文:http://blog.csdn.net/a345017062/article/details/6121147 /frameworks/base/services/java/InputMetho ...

中国UI设计网站长郝晓伟访谈

设计|站长编者:中国UI设计网 ChinaUI.com 是一个以UI(用户界面User Interface的简拼,下同)设计为主,其它设计为辅的专业人机界面设计网站.旨在增进UI设计师之间的交流,推 ...

ASP中几个有用的函数

function DeleteFile(Filename) '删除文件 if Filename<>"" then Set fso = server.CreateObj ...

MapX从数据库读取数据形成新图层（C#）

数据|数据库 MapX从数据库读取数据形成新图层(C#) 2005-5-10在C#中实现MapX从数据库读取数据形成新图层分为两个问题:1. MapX从数据库读取数据形成新图层:2. ...

C字符串函数strrev

原型:extern char *strrev(char *s); 用法:#include <string.h> 功能:把字符串s的所有字符的顺序颠倒过来(不包括空字符NULL). 说明:返 ...

Bjarne Stroustrup讲述语言的演变

目录对语言的看法语言发展趋势方法和最佳实践展望未来书籍和电话偶尔, 进化中的飞跃会迅速改善并重塑整个工程领域. 在软件开发领域,C++ 编程语言的诞生就引发了此类飞跃.这种飞跃并非此语言 ...

使用C++的托管扩展针对Windows窗体编程

摘要:本文讨论了如何使用 Visual C++ .NET 的托管扩展针对 Windows 窗体编程,并提供了使用直接访问 Windows 窗体类的手动编程技术的示例,以及使用 Windows 窗体设计 ...

Win7蓝屏提示错误代码0x00000019怎么解决？

Win7电脑蓝屏提示错误代码0x00000019的解决方法. 步骤如下: 错误的第一部分是停机码,即stop 0x00000019,用于识别已发生的错误类型.错误的第二部分是被括号括起来的四个数字 ...

360路由器助手怎么用

运行安装好的360路由器助手一般的情况下会自动检测链接一下你路由器的网关,过一会就会提示[开始管理我的路由器]. 输入你的路由器的账户和密码,点击[下一步] 进入以后,看到的连接到路由器的设备的数 ...

ie9-【Raphael】在IE9及以上版本的IE中对于path的拖动表现不正常

问题描述 [Raphael]在IE9及以上版本的IE中对于path的拖动表现不正常像下面这样改变path的attr来使其实现拖动效果,在FF,CHROM,IE8都正常,但是IE8以上的版本就不行,F ...

DBSPI40-1: Unable to fetch data from table 'V$SYSSTAT' [ORA-03135: connection lost contact]

先看一下oracle错误ORA-03135: connection lost contact 今晚遇到这个错误,给王工打电话,让我忽略,我之前以为是连接不到数据库了呢..好吧,我明天把它整理出来. 由 ...

邮箱附件在线预览功能

问题描述求一款可以向QQ和163邮箱一样的附件在线预览功能的插件office系类的文件和图片.PDF等可以在线预览压缩包可以在线打开解决方案解决方案二:有人在吗?,解决方案三:这个功能实现起来很 ...

二级域名与二级目录，我们如何抉择？

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断淘宝客云主机技术大厅很多站长在论坛发帖子问二级域名与二 ...

如何移除Windows 10锁屏界面「网络」按钮

Windows 10 的锁定屏幕是您登录到自己帐户前看到的第一屏,对于大多数用户来说它都非常实用. 通过个性化设置,用户不仅可以配置应用程序状态.自定义背景图像等多个选项,甚至还可以启用 Cortan ...

网站后台数据分析建议

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断淘宝客云主机技术大厅如果你作为公司SEO主管,那么如何 ...

objective-c-UISrcollView自动滚动

问题描述 UISrcollView自动滚动 // // // //手动左右无缝已经写完,差自动滚动,<方向:向右>带切换动画. // // // #import "ViewCon ...

自身经验：做友情连接的一些方法和技巧

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断淘宝客云主机技术大厅只要您是网站就离不开友情连接,除非 ...

Android仿百度谷歌搜索自动提示框AutoCompleteTextView简单应用示例_Android

本文实例讲述了Android仿百度谷歌搜索自动提示框AutoCompleteTextView简单应用.分享给大家供大家参考,具体如下: 现在我们上网几乎都会用百度或者谷歌搜索信息,当我们在输入框里输入 ...

Spring Boot集成JPA的Column注解命名字段无效的问题

偶然发现,Spring Boot集成jpa编写实体类的时候,默认使用的命名策略是下划线分隔的字段命名. Spring Boot版本:1.5.4.release 数据表: id int, userNam ...

机器数据的指南-splunk系列（1）

(一)前言时间序列数据(TIME-SERIES DATA). 大数据(BIG DATA).无论您称之什么,机器数据(machine data)都是任何组织中最容易低估的资产之一. 而且,不幸的是,数 ...

silverlight运行出现无法运行程序的错误

问题描述新手求教,我运行silverlight程序,出现如下错误,咋回事啊解决方案解决方案二:无法运行程序"http://localhost:10447/xxx.aspx"解 ...

flash：二次贝塞尔曲线应用-生成飞机路径示意图

本周听到公司其它项目组同事在讨论一个小需求: 给定3个点(其实是飞机经过的航站,比如:从浦东-西安-北京),在UI上生成一段曲线,用来示意飞机的路线图(其实用直线我觉得也能将就,反正只是示意,只是大家 ...

私有云的崛起：各方面因素造就私有云

尽管现在已经是云计算发展的春天了,但是很多的企业还是更乐意能够保持对IT环境和物理资源的掌控.一般状况下来说,法律法规可能会对企业实施从数据中心到公共云计算的转变进行阻止.由此反而早就了私有云计算的崛 ...

FCC或将采取措施缓解小型基站部署压力

据外媒报道,美国无线通信与互联网协会(CTIA)日前再次敦促FCC采取政策,使运营商及其合作伙伴更容易在全国各城市实现小型基站的部署. 美国四大主要无线运营商都希望通过小型基站部署,以在5G实现之前提 ...

Java生成和解析XML格式文件和字符串的实例代码_java

1.基础知识: Java解析XML一般有四种方法:DOM.SAX.JDOM.DOM4J. 2.使用介绍 1).DOM (1)简介由W3C(org.w3c.dom)提供的接口,它将整个XML文档读入内 ...

VBS教程：函数-Tan 函数_vbs

Tan 函数返回某个角的正切值. Tan(number) number 参数可以是任何将某个角表示为弧度的有效数值表达式. 说明 Tan 取某个角并返回直角三角形两个直角边的比值.此比值是直角三角形 ...

javascript-新人公司代码急求大牛帮忙解答

问题描述新人公司代码急求大牛帮忙解答 <@web_css_js></@web_css_js> 是什么,看不懂了,求解! 解决方案这个应该是某种公司内部的模板引擎定义的规范. ...

ubuntu 下VirtualBox 如何实现共享设置_VirtualBox

ubuntu 下VirtualBox 实现共享设置: 使用系统VirtualBox,另外又装个Ubuntu ,想让两个系统实现共享设置,经过上网查资料,得以实现,这里就 ...

c++-有没有能为编程新手答疑解惑的平台？

问题描述有没有能为编程新手答疑解惑的平台? 本人自学C++,有时会碰到一些问题,所以想问有没有这样的平台存在? 解决方案对的,一般很基础的就去问百度,比如一些语法.函数的用法等.如果是比较复杂的问 ...

五研究生网上卖菜市民点鼠标就可送菜上门

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断淘宝客云主机技术大厅中南财经政法大学哲学院5名研究生合 ...

热搜

© 2024 iVAN | info#iamivan.net | 11 q. 0.024 s.