Tabela Localstorage

AI

by thvinic

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabela com Adição e Remoção de Itens</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            text-align: left;
            padding: 8px;
            border: 1px solid black;
        }
        th {
            background-color: #f2f2f2;
        }
        .total {
            background-color: #f2f2f2;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <table id="myTable">
        <thead>
            <tr>
                <th>Item</th>
                <th>Preço (R$)</th>
                <th>Total (R$)</th>
                <th>Ações</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td contenteditable>Item 1</td>
                <td contenteditable>10.00</td>
                <td class="total" contenteditable>10.00</td>
                <td><button class="removeRow">Remover</button></td>
            </tr>
            <tr>
                <td contenteditable>Item 2</td>
                <td contenteditable>20.00</td>
                <td class="total" contenteditable>20.00</td>
                <td><button class="removeRow">Remover</button></td>
            </tr>
            <tr>
                <td contenteditable>Item 3</td>
                <td contenteditable>30.00</td>
                <td class="total" contenteditable>30.00</td>
                <td><button class="removeRow">Remover</button></td>
            </tr>
        </tbody>
    </table>
    <button id="addItem">Adicionar Item</button>
    <div id="total">Total: 0,00</div>

    <script>
 
    </script>
</body>
</html>

JavaScript

$(document).ready(function() {
            $("#addItem").click(function() {
                var newRow = "<tr><td contenteditable>Novo Item</td><td contenteditable>0.00</td><td class='total' contenteditable>0.00</td><td><button class='removeRow'>Remover</button></td></tr>";
                $("#myTable tbody").append(newRow);
            });

            $("#myTable").on("input", "td", function() {
                updateTotal();
                saveTableContent();
            });

            $("#myTable").on("click", ".removeRow", function() {
                $(this).closest("tr").remove();
                updateTotal();
                saveTableContent();
            });

            function updateTotal() {
                var total = 0;
                $("#myTable tbody tr").each(function() {
                    var price = parseFloat($(this).find("td:nth-child(2)").text());
                    if (!isNaN(price)) {
                        total += price;
                    }
                });
                $("#total").text("Total: R$" + total.toLocaleString('pt-BR', { minimumFractionDigits: 2, useGrouping: true }).toString());
            }

            function saveTableContent() {
                localStorage.setItem("myTable", $("#myTable").html());
            }

            function loadTableContent() {
                var content = localStorage.getItem("myTable");
                if (content) {
                    $("#myTable").html(content);
                }
            }

            loadTableContent();
            updateTotal();
        });