您好,欢迎访问一九零五行业门户网

用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();
var hidden2=document.createelement();
var hidden3=document.createelement();
var hidden4=document.createelement();//行状态
var hidden5=document.createelement();//隐藏单价
var input1=document.createelement();
var input2=document.createelement();
var input3=document.createelement();
var input4=document.createelement();
var input5=document.createelement();
var input6=document.createelement();
var input7=document.createelement();
var input8=document.createelement();
var input9=document.createelement()
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 {
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 {
if(table.rows[i].style.display == none||table.rows[i].cells[1].getelementsbytagname(input)[1].value==) continue;
for( var p= i + 1; 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;);
}
}
=======
前台页面
复制代码 代码如下:
序号
零件号
零件名称
数量
单价
生产厂家
材料来源
管理费
合计
操作
1
合同件
外购件备件部
厂家供件
项目需要这种功能,前前后后用了几种办法,我觉得还是这种比较好(毕竟是我花了蛮多时间写的,呵呵),js不怎么熟练,希望有朋友能指点帮助改进和提高。失败的作品,不兼容ff,衰!
其它类似信息

推荐信息