我正在使用deleteRow函数删除最后一行,但我无法保存表的更改。每次刷新页面时,都会再次显示已删除的行。
我想通过JavaScript将其保存到本地存储中。请建议我如何操作。
(If你可以提供我的代码,这将是最好的,因为我是一个新手在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");
}
}
型
1条答案
按热度按时间8ftvxx2r1#
要将对表所做的更改保存到本地存储中,可以在JavaScript中使用localStorage对象。下面是一个示例代码片段,演示了如何将表数据保存到本地存储:
JavaScript
字符串
为了从本地存储加载表数据,我们使用localStorage.getItem()检查本地存储中是否存在tableData键。如果存在,我们将表的innerHTML设置为保存的表数据。
我希望这对你有帮助!让我知道如果你有任何进一步的问题。