首页 > 软件开发 > HTML >

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

来源:互联网 2023-03-16 19:10:25 362

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

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

工具/原料

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

方法/步骤

  • 1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 4

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

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

  • 注意事项

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

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


    标签: JAVASCRIPTHTML

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