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

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

javascript html

使用Javascript在每个HTML页面加载时添加新行,javascript,html,Javascript,Html,我有一个非常基本的HTML页面，它只显示一个表。我正在尝试下面的代码，以便每次加载页面时都可以在表的底部添加新行（即使现在是相同的数据）。但是，每次我加载页面时，底部元素总是被相同的数据覆盖。我试图在W3学校做一些类似的事情（没有按钮，但概念相同）我的代码如下： <!DOCTYPE html> <html> <head> </head> <body> <table id="table" style="width:70%; t

我有一个非常基本的HTML页面，它只显示一个表。我正在尝试下面的代码，以便每次加载页面时都可以在表的底部添加新行（即使现在是相同的数据）。但是，每次我加载页面时，底部元素总是被相同的数据覆盖。我试图在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>


名字
姓氏
一行
前夕
杰克逊
94
约翰
雌鹿
80
函数myFunction（）{
var table=document.getElementById（“表格”）；
var行=table.insertRow（-1）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
cell1.innerHTML=“新建cell1”；
cell2.innerHTML=“新建cell2”；
cell3.innerHTML=“新建cell3”；
};
myFunction（）；

我还尝试用

document.addEventListener（“DOMContentLoaded”，function（）{…}

替换上面的myFunction，但这也没有解决我的问题。

JavaScript不会对HTML文件进行永久性更改。
这意味着加载页面后，将显示HTML代码，然后执行函数，添加新行。
再次重新加载后，将执行相同的过程，并且该行将添加到第二个HTML行的末尾。

无论您是在代码中使用simple方法还是您建议的其他方法（使用

document.addEventListener

），此函数只能执行一次，并且不会添加多行。

无论您是在代码中使用简单方法还是建议的其他方法（使用

document.addEventListener

），此函数只能执行一次，并且不会添加多行。

问题是，您的页面没有在任何地方存储其数据，因此，每当重新加载页面时，基本上就是在销毁您修改的任何数据，然后重新加载。您应该使用

localStorage

或本地数据库或其他类似工具这样可以跟踪数据，并在调用函数或页面卸载时保存页面状态

在伪代码中：

const loadFromLocalStorage = () => {
  const rows = localStorage.getItem("extra_rows") // extra_rows can be an array
  for(elem in rows) {
    // add to table
  }
}

const saveToLocalStorage = (obj) => {
  const rows = localStorage.getItem("extra_rows")
  localStorage.setItem([...rows, obj])
}

const addNewRow = () => {
  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";

  const obj = {
    cell1: cell1, cell2: cell2, cell3: cell3
  }
  saveToLocalStorage(obj)
}

const myFunction = () => {
  loadFromLocalStorage()
  addNewRow()
}

myFunction()

问题是，您的页面没有在任何地方存储数据，因此每当您重新加载页面时，基本上就是在销毁您修改的任何数据并重新加载。您应该使用

localStorage

或本地数据库或类似的工具来跟踪数据，并在调用或删除函数时保存页面的状态在页面上卸载

在伪代码中：

const loadFromLocalStorage = () => {
  const rows = localStorage.getItem("extra_rows") // extra_rows can be an array
  for(elem in rows) {
    // add to table
  }
}

const saveToLocalStorage = (obj) => {
  const rows = localStorage.getItem("extra_rows")
  localStorage.setItem([...rows, obj])
}

const addNewRow = () => {
  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";

  const obj = {
    cell1: cell1, cell2: cell2, cell3: cell3
  }
  saveToLocalStorage(obj)
}

const myFunction = () => {
  loadFromLocalStorage()
  addNewRow()
}

myFunction()

谢谢你的回答。那么做一些更改，以便在页面加载后运行Javascript代码怎么样？如果可能的话，可以解决我的问题吗？在页面加载后，你的JS代码已经在运行了。你是什么意思？嗯，也许我有点混淆了。我想这不是什么时候运行脚本的问题，更重要的是fa根据James下面的回答，数据没有保存在任何地方。这是真的。存储的唯一数据是显式存储在HTML中的前三行。使用JavaScript存储数据的简单方法是使用cookies。感谢您的回答。如何进行更改，以便在加载页面后运行JavaScript代码。W这可能吗？如果可能的话，解决我的问题？你的JS代码在页面加载后已经在运行了。你是什么意思？嗯，也许我有点混淆了。我想这不是什么时候运行脚本的问题，更重要的是，根据James下面的回答，数据没有保存在任何地方。这是真的。存储的唯一数据是e显式存储在HTML中的前三行。使用JavaScript存储数据的简单方法是使用Cookie。谢谢！我必须学习更多关于存储数据的知识，因为我对这个概念不太熟悉。谢谢！我必须学习更多关于存储数据的知识，因为我对这个概念不太熟悉。