多语言展示
当前在线:142今日阅读:39今日分享:10

js如何想表格的倒数第二行插入数据

js如何向表格的倒数第二行插入数据?想要通过javascript脚本来实现向表格中动态修改数据,首先需要获取相关html对象,再对其属性值进行修改来达到目的。下面,小编就以实例来为大家一一进行介绍。
方法/步骤
1

搭建测试环境打开记事本,输入以下代码:                 花名册            

     

                                                                                                                                                                                                 
姓名性别年龄
刘二18
张三16
李四20
王五19
     
   保存成网页文件test.html。如不清楚如何保存,请查看下面经验'创建网页'部分。

2

双击打开test.html,浏览器中运行效果如下图所示:

3

获取表格的总行数在网页代码标签后加入以下代码:   其中row就是用javascript脚本获取到的表格总行数,而row-2就是表格中倒数第二行在document.getElementsByTagName('tr')数组中的index。

4

获取表格倒数第二行的html内容通过以下语句可获取表格倒数第二行的html内容。document.getElementsByTagName('tr')[row-2].innerHTML;效果如图所示:

5

替换整行html内容实现单元格值修改即然我们能够获取表格倒数第二行的html代码内容,我们也能够通过设置倒数第二行的html代码内容来实现更改其单元格中的值。如:document.getElementsByTagName('tr')[row-2].innerHTML='赵七女18'

6

定位单元格进行值修改如果你只想修改某一单元格的值,还可以修改代码如下:document.getElementsByTagName('tr')[row-2].children[0].innerHTML='孙大圣';children[0]表示第一个单元格对象。如果要修改其它单元格,只需修改方括号的数字即可。

7

多个表格的处理如果有多个表格,则可以通过document.getElementsByTagName('table')[?]来定位表格,或给表格添加一个id然后利用document.getElementsById('tableID')来定位表格。如:document.getElementsByTagName('table')[0].getElementsByTagName('tr')[row-2].children[0].innerHTML='孙大圣1';

推荐信息