JS操作table

http://blog.csdn.net/william_zheng2010/article/details/5755262

首先要获得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)来删除行。具体就不是举例了。


补充:

table.rows[row].cells[col]来引用一个cell

你可能感兴趣的:(JS操作table)