java+文件+添加一行_在页面中动态添加一行以及删除一行列表

今天要实现一个在页面中动态添加以及删除一行列表的功能,查找了几种方法,在此备份,以便日后使用:

========================此方法比较简洁，而且可以解决问题========================

function deleteCurrentRow()//刪除當前行

{

var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex;

document.all.table10.deleteRow(currRowIndex);//table10--表格id

}

function insertRow()

{

var nRow=document.all.table10.rows.length; //表格的總行數

var objTheRow=document.all.table10.insertRow(nRow);//在最下邊新增一行

objTheRow.insertCell(0);//新增一個單元格

objTheRow.insertCell(1);

objTheRow.insertCell(2);

objTheRow.cells(0).innerHTML=nRow;//對新增的單元格?容

objTheRow.cells(1).innerHTML=" ";

objTheRow.cells(2).innerHTML="";

}

====================我的程序代码======================

cfbcard.html

var j_1 = 1;

function add_row_family(){

newRow=document.all.family.insertRow(-1)

newcell=newRow.insertCell()

newRow.bgColor='#FFFFFF';

newcell.className='STYLE3';

newcell.align='center';

//newcell.innerHTML="";

newcell.innerHTML=""+

" "+

"   请选择"+

"  "+

"  "+

"   111"+

"  "+

"  "+

"   222"+

"  "+

"  "+

"   333"+

"  "+

"  "+

"   444"+

"  "+

"  "+

"   555"+

"  "+

"";

for(var i = 0;i<12;i++){

newcell=newRow.insertCell() ;

newRow.bgColor='#FFFFFF';

newcell.className='STYLE3';

newcell.align='center';

newcell.innerHTML="";

}

newcell=newRow.insertCell() ;

newRow.bgColor='#FFFFFF';

newcell.className='STYLE3';

newcell.align='center';

//newcell.innerHTML="删除";

newcell.innerHTML="";

j_1++;

document.all.j_1.value=j_1;

document.all.family.focus();

}

function deleteCurrentRow()//刪除當前行

{

var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex;

document.all.family.deleteRow(currRowIndex);//table10--表格id

}

111 222 333 444 555 666 777 888 999 000 123 456 789 删除

=================================另外一种方法==============

如何删除表格的行上次讲到了如何动态给表格增加行，那么这次就讲讲如何删除表格的行了。首先建立一个表格，

姓名	地址
name	address

取得tbody的元素var mailbody = document.getElementById("mainbody");,

接着取得要删除行的元素var cell = document.getElementById("delCell");

最后就是从tbody中移去要删除的行就可以了mainbody.removeChild(cell);

完整的代码如下：

动态删除表格的行

function deleteCell(){

var mailbody = document.getElementById("mainbody");

var cell = document.getElementById("delCell");

if(cell!=undefined){

mainbody.removeChild(cell);

}

}

姓名	地址
name	address

posted on 2007-04-18 23:49 阿伟 阅读(2796) 评论(2)  编辑  收藏 所属分类: JS