首页 > 软件开发 > JavaScript >

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

来源:互联网 2023-03-16 23:58:19 版权归原作者所有,如有侵权,请联系我们

js如何向表格的倒数第二行插入数据?想要通过javascript脚本来实现向表格中动态修改数据,首先需要获取相关html对象,再对其属性值进行修改来达到目的。下面,小编就以实例来为大家一一进行介绍。TUQ办公区 - 实用经验教程分享!

js如何想表格的倒数第二行插入数据TUQ办公区 - 实用经验教程分享!

方法/步骤

  • 1

    搭建测试环境TUQ办公区 - 实用经验教程分享!

    打开记事本,输入以下代码:TUQ办公区 - 实用经验教程分享!

    html>TUQ办公区 - 实用经验教程分享!

    head>TUQ办公区 - 实用经验教程分享!

    meta charset="utf-8">TUQ办公区 - 实用经验教程分享!

    title>花名册/title>TUQ办公区 - 实用经验教程分享!

    /head>TUQ办公区 - 实用经验教程分享!

    body>TUQ办公区 - 实用经验教程分享!

    br/>br/>TUQ办公区 - 实用经验教程分享!

    center>TUQ办公区 - 实用经验教程分享!

    table border="1" width=400px >TUQ办公区 - 实用经验教程分享!

    tr>TUQ办公区 - 实用经验教程分享!

    th>姓名/th>th>性别/th>th>年龄/th>TUQ办公区 - 实用经验教程分享!

    /tr>TUQ办公区 - 实用经验教程分享!

    tr align=middle>TUQ办公区 - 实用经验教程分享!

    td>刘二/td>td>男/td>td>18/td>TUQ办公区 - 实用经验教程分享!

    /tr>TUQ办公区 - 实用经验教程分享!

    tr align=middle>TUQ办公区 - 实用经验教程分享!

    td>张三/td>td>男/td>td>16/td>TUQ办公区 - 实用经验教程分享!

    /tr>TUQ办公区 - 实用经验教程分享!

    tr align=middle>TUQ办公区 - 实用经验教程分享!

    td>李四/td>td>女/td>td>20/td>TUQ办公区 - 实用经验教程分享!

    /tr>TUQ办公区 - 实用经验教程分享!

    tr align=middle>TUQ办公区 - 实用经验教程分享!

    td>王五/td>td>男/td>td>19/td>TUQ办公区 - 实用经验教程分享!

    /tr>TUQ办公区 - 实用经验教程分享!

    /table>TUQ办公区 - 实用经验教程分享!

    /center>TUQ办公区 - 实用经验教程分享!

    /body>TUQ办公区 - 实用经验教程分享!

    /html>TUQ办公区 - 实用经验教程分享!

    保存成网页文件test.html。如不清楚如何保存,请查看下面经验"创建网页"部分。TUQ办公区 - 实用经验教程分享!

    5如何创建站点首页TUQ办公区 - 实用经验教程分享!

    js如何想表格的倒数第二行插入数据TUQ办公区 - 实用经验教程分享!

  • 2

    双击打开test.html,浏览器中运行效果如下图所示:TUQ办公区 - 实用经验教程分享!

    js如何想表格的倒数第二行插入数据TUQ办公区 - 实用经验教程分享!

  • 3

    获取表格的总行数TUQ办公区 - 实用经验教程分享!

    在网页代码/body>标签后加入以下代码:TUQ办公区 - 实用经验教程分享!

    script language=javascript>TUQ办公区 - 实用经验教程分享!

    var row;TUQ办公区 - 实用经验教程分享!

    row=document.getElementsByTagName('tr').length;TUQ办公区 - 实用经验教程分享!

    alert("表格总行数为:" row);TUQ办公区 - 实用经验教程分享!

    /script>TUQ办公区 - 实用经验教程分享!

    其中row就是用javascript脚本获取到的表格总行数,而row-2就是表格中倒数第二行在document.getElementsByTagName('tr')数组中的index。TUQ办公区 - 实用经验教程分享!

    js如何想表格的倒数第二行插入数据TUQ办公区 - 实用经验教程分享!

  • 3相关内容非法爬取自百度经验
  • 4

    获取表格倒数第二行的html内容TUQ办公区 - 实用经验教程分享!

    通过以下语句可获取表格倒数第二行的html内容。TUQ办公区 - 实用经验教程分享!

    document.getElementsByTagName('tr')[row-2].innerHTML;TUQ办公区 - 实用经验教程分享!

    效果如图所示:TUQ办公区 - 实用经验教程分享!

    js如何想表格的倒数第二行插入数据TUQ办公区 - 实用经验教程分享!

  • 5

    替换整行html内容实现单元格值修改TUQ办公区 - 实用经验教程分享!

    即然我们能够获取表格倒数第二行的html代码内容,我们也能够通过设置倒数第二行的html代码内容来实现更改其单元格中的值。TUQ办公区 - 实用经验教程分享!

    如:TUQ办公区 - 实用经验教程分享!

    document.getElementsByTagName('tr')[row-2].innerHTML="td>赵七/td>td>女/td>td>18/td>"TUQ办公区 - 实用经验教程分享!

    js如何想表格的倒数第二行插入数据TUQ办公区 - 实用经验教程分享!

  • 6

    定位单元格进行值修改TUQ办公区 - 实用经验教程分享!

    如果你只想修改某一单元格的值,还可以修改代码如下:TUQ办公区 - 实用经验教程分享!

    document.getElementsByTagName('tr')[row-2].children[0].innerHTML="孙大圣";TUQ办公区 - 实用经验教程分享!

    children[0]表示第一个单元格对象。如果要修改其它单元格,只需修改方括号的数字即可。TUQ办公区 - 实用经验教程分享!

    js如何想表格的倒数第二行插入数据TUQ办公区 - 实用经验教程分享!

  • 7

    多个表格的处理TUQ办公区 - 实用经验教程分享!

    如果有多个表格,则可以通过document.getElementsByTagName('table')[?]来定位表格,或给表格添加一个id然后利用document.getElementsById('tableID')来定位表格。如:TUQ办公区 - 实用经验教程分享!

    document.getElementsByTagName('table')[0].getElementsByTagName('tr')[row-2].children[0].innerHTML="孙大圣1";TUQ办公区 - 实用经验教程分享!

    js如何想表格的倒数第二行插入数据TUQ办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!TUQ办公区 - 实用经验教程分享!


    标签: JAVASCRIPT

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号