HTML的table结构如下：
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.rows[1].cloneNode(true);
for(var i=1;ifor(var p=0;pif(tr.childNodes[i].getElementsByTagName("input")[p].name=="Dy_hd_rowState")//行状态特殊对待
tr.childNodes[i].getElementsByTagName("input")[p].value="1";
else
tr.childNodes[i].getElementsByTagName("input")[p].value="";
}
}
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[1].value;//用户可见的行数
tr.firstChild.innerHTML=parseInt(rowCount)+1;
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount)+1;//可见行数+1
table.rows[0].cells[0].getElementsByTagName("input")[0].value = table.rows.length;//总行数，包含隐藏的
var tbody=table.getElementsByTagName("tbody");
if(tbody!=null){
tbody[0].appendChild(tr);
}else
table.appendChild(tr);
}
//删除时的事件
function delnode(){
var table=document.getElementById("Dy_table");
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[1].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")[2].value;
if( rowCount > 1 ){
if(rowId=="")//新增的行未写入数据库时，直接删除
{
var tbody=table.getElementsByTagName("tbody");
if(tbody!=null){
tbody[0].removeChild(row);
}else
table.removeChild(row);
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount) - 1;
}
else//需要从数据库删除的，置上删除标记
{
row.style.display="none";
row.cells[1].getElementsByTagName("input")[3].value = "2";
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount)-1;
}
}else{
if(rowId == ""){//新增的行未写入数据库时，清空
row.cells[1].getElementsByTagName("input")[0].value="";
row.cells[1].getElementsByTagName("input")[1].value="";
row.cells[1].getElementsByTagName("input")[2].value="";
row.cells[1].getElementsByTagName("input")[3].value="";
row.cells[1].getElementsByTagName("input")[4].value="";
row.cells[2].getElementsByTagName("input")[0].value="";
row.cells[3].getElementsByTagName("input")[0].value="1";
row.cells[4].getElementsByTagName("input")[0].value="";
row.cells[5].getElementsByTagName("input")[0].value="";
row.cells[6].getElementsByTagName("input")[0].value="";
row.cells[7].getElementsByTagName("input")[0].value="";
row.cells[8].getElementsByTagName("input")[0].value="";
}else{//需要从数据库删除的，置上删除标记
row.style.display="none";
row.cells[1].getElementsByTagName("input")[3].value = "2";
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount) - 1;
addnode();
}
}
setClf();
}
//删除时的事件
function delnode1(o){
var tr=o.parentNode.parentNode;
var table=document.getElementById("Dy_table");
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[1].value;//用户可见的行数
var rowId=tr.cells[1].getElementsByTagName("input")[2].value;
if( rowCount > 1 ){
if(rowId=="")//新增的行未写入数据库时，直接删除
{
var tbody=table.getElementsByTagName("tbody");
if(tbody!=null){
tbody[0].removeChild(tr);
}else
table.removeChild(tr);
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount) - 1;
}
else
{
tr.style.display="none";
tr.cells[1].getElementsByTagName("input")[3].value = "2";
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount) - 1;
}
}else{
if(rowId==""){//新增的行未写入数据库时，直接清空
tr.cells[1].getElementsByTagName("input")[0].value="";
tr.cells[1].getElementsByTagName("input")[1].value="";
tr.cells[1].getElementsByTagName("input")[2].value="";
tr.cells[1].getElementsByTagName("input")[3].value="";
tr.cells[1].getElementsByTagName("input")[4].value="";
tr.cells[2].getElementsByTagName("input")[0].value="";
tr.cells[3].getElementsByTagName("input")[0].value="1";
tr.cells[4].getElementsByTagName("input")[0].value="";
tr.cells[5].getElementsByTagName("input")[0].value="";
tr.cells[6].getElementsByTagName("input")[0].value="";
tr.cells[7].getElementsByTagName("input")[0].value="";
tr.cells[8].getElementsByTagName("input")[0].value="";
}else{//需要从数据库删除的，置上删除标记
tr.style.display="none";
tr.cells[1].getElementsByTagName("input")[3].value = "2";
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount) - 1;
addnode();
}
}
//以下循环用于从中间删除时更新表格行号
for( var i= 1,p = 1; i if(table.rows[i].style.display!="none")
{
table.rows[i].cells[0].innerHTML = p;
p++;
}
}
setClf();
}
//修改时发生的事件，改变行状态
function textChange(o){
var tr=o.parentElement.parentElement;
if(o.parentElement.parentElement.parentElement==null)return;//如果是新增加的行则返回
var rowState = tr.cells[1].getElementsByTagName("input")[3].value;
if( rowState == "1")
return;
else
tr.cells[1].getElementsByTagName("input")[3].value = "3";
setClf();
}
//提交前验证数据，保证没有重复的行
function checkSameData(){
var table=document.getElementById("Dy_table");
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.parentNode.parentNode;//将行赋值给全局变量
var cpxh = selectRow.cells[1].getElementsByTagName("input")[0].value;
dialogWin = winOpen('selectLj.aspx?ljh='+cpxh);
// window.open("../jddgl/Select_lj.aspx?ljh=" + cpxh,window,
// "center:yes;dialogWidth:600px;dialogHeight:400px;help:no;status:no;");
}
}
function winOpen(url){
return window.open(url,'selectLj','resizable=1,status=0,menubar=0,scrollbars=1,height=400px,width=600px');
}
//计算table内费用
function setClf(){}
这算是对之前写的
动态增加表格的改进，之前那个实在是学习了js没多久而作的失败作品。现在这个总算是可以兼容FF和IE了。在兼容的过程中，没少看标准dom规范，提高了不少知识，js操作dom翻看ms的DHTML手册的时候要注意它里面提到的方法和属性是不是标准的，最好用标准的。
此动态table只要HTML里定好了table就可以动态的增减，不用关心它有多少个td，注意在第二个td里面加上相关的input hidden。动态增删只是一个表面的功能，这个table和dataset一样具有一个行状态，用行状态可以在服务器端对数据进行更新、删除和新增。1新增，2删除，3修改。只是用弹出窗口在FF和IE7下效果不行，不知道用iframe效果怎么样。
IE下对于clone出来的tr不能通过cells来获取td的集合，FF下则是可以。由于tr内有input用了onpropertychange事件，在去掉新增的tr内input值的时候也会触发，所以在这个事件里用一个if排除了这种情况。浏览器的兼容还真是有些麻烦。FF下面还存在一个问题，从没有提交页面的情况下，FF重新载入页面的时候，服务器端控件的值会被保存下来，而IE下则是真的重新载入，页面上的任何值都不会保留。FF的这个保存服务器控件值的行为应该是它对asp.net支持存在问题，没有提交页面的情况下这是不应该发生的。
Statement：The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
