JS操作table

虽然现在前台已经很少用table来布局了，但是有的地方还是会难免的用到table，比如表单，或者其他的列表，用table肯定比div来的方便，那么，用table的话要加上js来实现一些效果，比如删除一行，添加一行，所以，有必要好好熟悉一下js对table的操作，

首先要获得table对象，有很多方法，

通过ID，table = document.getElementById()来获得

通过CLASS，table = document.getElementsByClass()来获得

通过TABNAME，table = document.getElementsByTagName()来获得

获得table对象之后呢，可能我们要先知道table对象有几行，

可以通过，table.rows.length来获得行数，table.rows返回当前table对象的行的集合。通过row = table.rows[i]可以获得table对象的第i+1行对象。对于row对象呢，它有一个属性，就是row.rowIndex返回的是i,

然后呢，需要插入行。有两个函数可以供大家使用，

insertRow(index)和insertCell(index);看到函数名大家都可以明白是什么函数了，没错，通过table对象调用insertRow函数，可以在table对象中插入一行然后返回新建的行对象，参数index是索引，表示插在第几行，从0开始，但是index不能小于0或者大于table的现有行数，否则会报错。同理，通过行对象调用insertCell函数，可以在行对象中插入单元格并返回单元格对象。参数index同样是索引，同样可以通过行对象的cells集合的长度来获得，row.cells.length。

<html>
<head>
   <title>sdfsd</title>
</head>
<script language="javascript">
function add_tr()
{
     table = document.getElementById("tab");
     row = table.insertRow(table.rows.length);
row.insertCell(row.cells.length).innerHTML="第四行第一列";
     row.insertCell(row.cells.length).innerHTML="第四行第二列";
}
</script>
<body>
   <table id="tab">
     <tr><td>第一行第一列</td><td>第一行第二列</td></tr>
     <tr><td>第二行第一列</td><td>第二行第二列</td></tr>
     <tr><td>第三行第一列</td><td>第三行第二列</td></tr>
   </table>
   <span onclick="add_tr()">点击我</span>
</body>
</html>
上面的例子在ff和ie下都可以运行，可以正确的添加行。

那如果要删除行呢？

我是通过获得父节点，然后删除子节点来做到的

先获得行对象tr,然后获得tr对象的父节点。par = tr.parentNode（这里为什么要通过tr的父节点来获取父节点，而不是直接通过其他直接的方法来获取父节点呢，因为ff和ie在这边上有差别，在ie上table下就是tr，而在ff下table下还有thead和tbody，tbody下才是tr，如果直接获取，则要判断，如果通过tr获取父节点，则可以直接用），然后通过par.removeChild(tr)来删除行。具体就不是举例了。

猜你喜欢