打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
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)来删除行。具体就不是举例了。

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
AJAX相关JS代码片段和浏览器模型
JavaScript表格(table)操作方法
如何通过js获取表单对象?
js获取table表格数据并返回对象数组(工作记录)
在页面中动态添加一行以及删除一行列表
js控制删除table的行
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服