个人中心
gpt4 book ai didi

javascript - 使用 Javascript 在每个 HTML 页面加载时添加新行

转载 作者：行者123 更新时间：2023-12-01 00:48:43 24 4
gpt4 key购买 nike

我有一个非常基本的 HTML 页面，它只显示一个表格。我正在尝试下面的代码，以便每次加载页面时都可以在表格底部添加一个新行(即使现在是相同的数据)。但是，每次加载页面时，底部元素都会被相同的数据覆盖。我正在尝试做类似 this example 的事情在 W3 学校(没有按钮，但概念相同)。

我的代码如下:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<table id="table" style="width:70%; text-align: center;">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Row</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

<script>

    function myFunction() {
        var table = document.getElementById("table");
        var row = table.insertRow(-1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        cell1.innerHTML = "NEW CELL1";
        cell2.innerHTML = "NEW CELL2";
        cell3.innerHTML = "NEW CELL3";
    };

    myFunction();

</script>

</body>
</html>

我还尝试将上面的 myFunction 替换为 document.addEventListener("DOMContentLoaded", function(){...} ，但这也没有解决我的问题。

最佳答案

JavaScript 不会对您的 HTML 文件进行永久更改。
这意味着加载页面后，将显示您的 HTML 代码，然后执行该函数，添加新行。
再次重新加载后，将会发生相同的过程，并且该行将添加到第二个 HTML 行末尾之后。
无论您在代码中使用简单方法还是您建议的其他方法(使用 document.addEventListener)，此函数都只会执行一次，并且不会添加多个行。

关于javascript - 使用 Javascript 在每个 HTML 页面加载时添加新行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57161092/

24 4 0
文章推荐： wso2 - 如何在 Ballerina 中获取变量的类型？
文章推荐： php - 如何从 codeigniter 模型中获取结果作为对象
文章推荐： plone - Diazo 中的多重条件
文章推荐： javascript - 如何改变状态？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com