javascript 我正在使用此函数删除表中的一行，但无法保存表的更改

我正在使用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");
    }
    
    
}

型

要将对表所做的更改保存到本地存储中，可以在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设置为保存的表数据。
我希望这对你有帮助！让我知道如果你有任何进一步的问题。

javascript 我正在使用此函数删除表中的一行，但无法保存表的更改

1条答案

相关问题

热门标签

最新问答