您的位置：首页 > Web前端 > JavaScript

JS 动态操作表格

2016-07-05 15:47 369 查看

http://blog.csdn.net/long_carol/article/details/7356897

//动态添加行与列

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);
}

//创建表格的行与列

<script type="text/JavaScript"> function add_table(){var table = document.createElement("table");var tbody = document.createElement("tbody");var tr = document.createElement("tr");var td = document.createElement("td");var content = document.createTextNode("我是个表格.");td.appendChild(content);tr.appendChild(td);tbody.appendChild(tr);table.appendChild(tbody);document.body.appendChild(table);}</script></head><body onload="add_table();"></body></html>
//删除当前行

在当前的列中写一个事件：如 <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); //删除行

}

　　

方法2
http://www.cnblogs.com/wequst/archive/2010/02/02/1661709.html

inserRow()和insertCell()方法

首先，表格行索引从0开始。

inserRow()：
这个函数将新行添加到index的那一行前，

比如insertRow(0),是将新行添加到第一行之前。

默认的insertRow()函数相当于 insertRow(-1)，将新行添加到表的最后。

objTable.insertRow (objTable.rows.length).就是为表格objTable在最后新增一行。

insertCell()和insertRow（）的用法相同，这里就不再说了。

deleteRow()和deleteCell()方法
deleteRow(index)：index从0开始

删除指定位置的行和单元格。要传入的参数：Index是行在表格中的位置，可以下面的方法取得然后去删除：

var row=document.getElementById("行的Id");
var index=row.rowIndex; //有这个属性，嘿嘿
objTable.deleteRow(index);
注意：

删除表格的行的时候，如果你删除了某一行，那么表格行数是马上就变化的

错误JS代码：

复制代码
function clearRow()
{
objTable= document.getElementById("myTable");
var length = objTable.rows.length
for( var i=1; i<length ; i++ )
{
tblObj.deleteRow(i);
//应该是deleteRow(1)。因为在删除表格行的时候，表格的行数在变化，这就是问题的关键，rows.length总是在变小，删除的行数总是会比预想的要少一半
}
}
复制代码

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航