虽然现在前台已经很少用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)来删除行。具体就不是举例了。
联系客服