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 οnclick="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)来删除行。具体就不是举例了。

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值