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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com