首页 > 软件开发 > JavaScript >

如何使用JavaScript表格对象对表格添加新的一行

来源:互联网 2023-03-16 23:57:11 123

我们在进行HTML编程时,可能会遇到需要向表格添加新的一行,此时就可以用到JavaScript的table对象insertRow()方法进行添加。VJ2办公区 - 实用经验教程分享!

如何使用JavaScript表格对象对表格添加新的一行VJ2办公区 - 实用经验教程分享!

工具/原料

  • 编辑器
  • JavaScript和HTML语言
  • 浏览器

方法/步骤

  • 1

    首先在记事本中输入以下代码:VJ2办公区 - 实用经验教程分享!

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

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

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

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

    table id="myTable" border="1">VJ2办公区 - 实用经验教程分享!

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

    td>第一行1/td>VJ2办公区 - 实用经验教程分享!

    td>第一行2/td>VJ2办公区 - 实用经验教程分享!

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

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

    td>第二行1/td>VJ2办公区 - 实用经验教程分享!

    td>第二行2/td>VJ2办公区 - 实用经验教程分享!

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

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

    td>第一行1/td>VJ2办公区 - 实用经验教程分享!

    td>第二行2/td>VJ2办公区 - 实用经验教程分享!

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

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

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

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

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

    然后把文件保存为.html文件,在浏览器中打开如图VJ2办公区 - 实用经验教程分享!

    如何使用JavaScript表格对象对表格添加新的一行VJ2办公区 - 实用经验教程分享!

  • 1相关内容未经许可获取自百度经验
  • 2

    在表格后添加一个按钮VJ2办公区 - 实用经验教程分享!

    VJ2办公区 - 实用经验教程分享!

    input type="button" value="插入行">VJ2办公区 - 实用经验教程分享!

    如何使用JavaScript表格对象对表格添加新的一行VJ2办公区 - 实用经验教程分享!

    如何使用JavaScript表格对象对表格添加新的一行VJ2办公区 - 实用经验教程分享!

  • 3

    添加JavaScript脚本VJ2办公区 - 实用经验教程分享!

    script type="text/javascript">VJ2办公区 - 实用经验教程分享!

    function insRow()VJ2办公区 - 实用经验教程分享!

    {VJ2办公区 - 实用经验教程分享!

    var x=document.getElementById('myTable').insertRow(0)VJ2办公区 - 实用经验教程分享!

    var y=x.insertCell(0)VJ2办公区 - 实用经验教程分享!

    var z=x.insertCell(1)VJ2办公区 - 实用经验教程分享!

    y.innerHTML="新行1"VJ2办公区 - 实用经验教程分享!

    z.innerHTML="新行2"VJ2办公区 - 实用经验教程分享!

    }VJ2办公区 - 实用经验教程分享!

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

    VJ2办公区 - 实用经验教程分享!

    并在按钮点击事件中引用;VJ2办公区 - 实用经验教程分享!

    input type="button" onclick="insRow()" value="插入行">VJ2办公区 - 实用经验教程分享!

    如何使用JavaScript表格对象对表格添加新的一行VJ2办公区 - 实用经验教程分享!

  • 4

    点击插入行按钮后即可在第一行进行插入,若想在别的地方插入只需要对document.getElementById('myTable').insertRow(0)中的‘’0‘进行修改。VJ2办公区 - 实用经验教程分享!

    如何使用JavaScript表格对象对表格添加新的一行VJ2办公区 - 实用经验教程分享!

  • 注意事项

    • object.insertCell(num)可以对某个表格元素进行插入
    • 具体JavaScript的table对象操作可以在W3C中进行查询

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


    标签: JAVASCRIPTHTML

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