我正在通过函数deleteRow删除最后一行，但我无法保存表的更改。每次我刷新页面时，它都会再次显示已删除的行。
我想通过 JavaScript 将其保存在本地存储上。请建议我该怎么做。
（如果你能给我提供代码，那对我来说是最好的 JavaScript 菜鸟）
预先感谢！
这是 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="D:\Programming world\My Apps\Cashier App (Abbur Jonno)\CSS\style.css">
<title>Bank</title>
</head>
<body>
<h1>ONE BANK LTD NO: 0200161247006</h1>
<div class="input_segment">
<form onsubmit="addData(); return false;" action="">
Date : <input type="text" name="" id="date" required>
By : <input type="text" name="" id="by" required>
Particulars : <input type="text" name="" id="partc" required>
Deposite BDT : <input type="text" name="" id="dbdt" required>
Withdrawal BDT : <input type="text" name="" id="wbdt" required>
<!-- Current Balance : <input type="text" name="" id="cbl" required> -->
<input type="submit" value="Add">
<input type="reset" value="Reset">
<input type="button" value="Delete data" onclick="deleteData()" class="dltbtn">
<input type="button" value="Delete row" onclick="deleteRow()" class="dltr">
</form>
</div>
<div id="tblContainer">
<table id="tbl" border="1">
<tr>
<td class="head">Date</td>
<td class="head">By</td>
<td class="head">Particulars</td>
<td class="head">Diposite BDT</td>
<td class="head">Withdrawal BDT</td>
<td class="head">Current Balance</td>
</tr>
</table>
<span id="totalCbl"></span>
</div>
<script src="D:\Programming world\My Apps\Cashier App (Abbur Jonno)\JS\script.js"></script>
<script>
showData();
</script>
</body>
</html>
这是Javascript
var arr = new Array();
function addData()
{
getData();
arr.push(
{
date:document.getElementById("date").value,
by:document.getElementById("by").value,
partc:document.getElementById("partc").value,
dbdt:document.getElementById("dbdt").value,
wbdt:document.getElementById("wbdt").value,
cbl:document.getElementById("dbdt").value - document.getElementById("wbdt").value
}
);
localStorage.setItem("Data",JSON.stringify(arr));
showData();
// Showing the total value of current balance
var table = document.getElementById("tbl"), sumval=0;
for(var i = 1; i<table.rows.length;i++)
{
sumval= sumval+parseInt(table.rows[i].cells[5].innerHTML);
}
document.getElementById("totalCbl").innerHTML=sumval;
localStorage.setItem("Sum",sumval);
//console.log(sumval);
}
function getData()
{
var str = localStorage.getItem("Data");
if (str != null)
{
arr = JSON.parse(str);
}
}
function showData()
{
getData();
var table = document.getElementById("tbl");
var x = table.rows.length;
while(--x)
{
table.deleteRow(x);
}
for(i=0;i<arr.length;i++)
{
var row = tbl.insertRow();
var cell1 = row.insertCell();
var cell2 = row.insertCell();
var cell3 = row.insertCell();
var cell4 = row.insertCell();
var cell5 = row.insertCell();
var cell6 = row.insertCell();
cell1.innerHTML = arr[i].date;
cell2.innerHTML = arr[i].by;
cell3.innerHTML = arr[i].partc;
cell4.innerHTML = arr[i].dbdt;
cell5.innerHTML = arr[i].wbdt;
cell6.innerHTML = arr[i].cbl;
}
}
function deleteData()
{
localStorage.clear();
}
function deleteRow()
{
var table = document.getElementById("tbl");
var y = table.rows.length;
y=y-1;
if(y != 0)
{
var c = confirm("Do you want to delete the last row?");
if(c==true)
{
table.deleteRow(y);
}
}
else
{
alert("Don't delete the header row");
}
}
要将对表所做的更改保存在本地存储中，您可以使用 JavaScript 中的 localStorage 对象。下面是一个示例代码片段，演示了如何将表数据保存到本地存储：
JavaScript
// Get the table element
const table = document.getElementById("table");
// Add an event listener to the delete button
table.addEventListener("click", function(event) {
if (event.target.tagName === "BUTTON") {
// Delete the row
event.target.parentNode.parentNode.remove();
// Save the table data to local storage
localStorage.setItem("tableData", table.innerHTML);
}
});
// Load the table data from local storage
if (localStorage.getItem("tableData")) {
table.innerHTML = localStorage.getItem("tableData");
}
//In this example, we first get the table element using document.getElementById(). We then add an event listener to the table that listens for clicks on the delete button. When a delete button is clicked, we delete the corresponding row and save the updated table data to local storage using localStorage.setItem().
要从本地存储加载表数据，我们使用 localStorage.getItem() 检查本地存储中是否存在 tableData 键。如果是，我们将表格的innerHTML设置为保存的表格数据。
我希望这有帮助！如果您还有任何疑问，请告诉我。