js动态添加表格的行与列

最新推荐文章于 2026-05-03 06:01:04 发布

原创最新推荐文章于 2026-05-03 06:01:04 发布 · 1.5w 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#table #function #input

JavaScript自学大全专栏收录该内容

12 篇文章

订阅专栏

//动态添加行与列

function addHtml( )

{
var tab=document.getElementById("viewTabs"); //获得表格
var colsNum=tab.rows.item(0).cells.length; //表格的列数

var num=document.getElementById("viewTabs").rows.length;//表格当前的行数

var rownum=num-1;
tab.insertRow(rownum);
for(var i=0;i<colsNum-1; i++)
{

tab.rows[rownum].insertCell(i);//插入列
tab.rows[rownum].cells[i].innerHTML="dfd";

}
tab.rows[rownum].insertCell(i);
tab.rows[rownum].cells[i].innerHTML="ddddkk";

}

//动态删除表格的行

function deleterow()
{

var lowNum;
var num=document.getElementById("viewTabs").rows.length;
alert(num);
if(num==2)
{
lowNum=num-1;
}
var tb=document.getElementById("viewTabs");
tb.deleteRow(lowNum);

}

//创建表格的行与列

//删除当前行

在当前的列中写一个事件：如 <input type="text" id="btnCans" onclick="delRow(this)"/>

function delRow(obj)
{
var Row=obj.parentNode;
var Row=obj.parentNode; //tr
while(Row.tagName.toLowerCase()!="tr")
{
Row=Row.parentNode;
}
Row.parentNode.removeChild(Row); //删除行

}