用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不怎么熟练，希望有朋友能指点帮助改进和提高。失败的作品，不兼容ＦＦ，衰！
本文地址：https://www.stayed.cn/item/2909
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)