A planilha em HTML

Frank K Hosaka · Julho 22

Semana passada eu tentei estudar o phpspreadsheet, mas não deu certo, eu acredito que ele não trabalha com planilhas protegidas por senha.

Já que a biblioteca do php não deu certo, então decidi montar uma planilha dentro do php, usando o HTML e o MySQL.

Eu já tenho uma planilha no PHP com o MySQL, eu chamo de entrada de produto. Mesmo assim, eu fiquei curioso e pedi para a Gemini montar uma planilha em HTML.

O código dela é bacana, só que não funciona, não soma a terceira célula e nem as colunas como eu pedi. Isso é coisa para quem entende de JavaScript, esse não é o meu caso:

index.php (escrito por Gemini)

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Planilha Interativa</title>
    <style>
        body {width:50%; margin:auto}
        table {border-collapse: collapse;width: 100%;}
        th, td {border: 1px solid #ccc;padding: 5px;text-align: left;}
        th {background-color: #eee;font-weight: bold;}
        #totais {margin-top: 10px;}
        #totais th, #totais td {font-weight: normal;}
    </style>
</head>
<body>
    <h1>Planilha Interativa</h1>
    <div id="tabela">
        <table>
            <thead>
                <tr>
                    <th>Coluna 1</th>
                    <th>Coluna 2</th>
                    <th>Soma</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <button id="adicionarLinha">Adicionar Linha</button>
        <h2>Totais por Coluna:</h2>
        <table id="totais">
            <tr>
                <th>Coluna 1</th>
                <th>Coluna 2</th>
                <th>Soma</th>
            </tr>
            <tr>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
        </table>
    </div>

    <script>
    const tabela = document.getElementById('tabela').querySelector('tbody');
    const botaoAdicionar = document.getElementById('adicionarLinha');
    const totaisTabela = document.getElementById('totais').querySelector('tbody');
    const totalColuna1 = totaisTabela.querySelector('tr:nth-child(2) td:nth-child(1)');
    const totalColuna2 = totaisTabela.querySelector('tr:nth-child(2) td:nth-child(2)');
    const totalSoma = totaisTabela.querySelector('tr:nth-child(2) td:nth-child(3)');

    botaoAdicionar.addEventListener('click', () => {
        const linha = tabela.insertRow();
        const celulaNova1 = linha.insertCell();
        const inputNovo1 = document.createElement('input');
        inputNovo1.type = 'text';
        celulaNova1.appendChild(inputNovo1);
        const celulaNova2 = linha.insertCell();
        const inputNovo2 = document.createElement('input');
        inputNovo2.type = 'text';
        celulaNova2.appendChild(inputNovo2);
        const celulaNova3 = linha.insertCell();
        const inputNovo3 = document.createElement('input');
        inputNovo3.type = 'text';
        inputNovo3.disabled = true;
        celulaNova3.appendChild(inputNovo3);
        // Evento para calcular a soma na linha e atualizar totais
        inputNovo1.addEventListener('input', calcularLinhaEtotais);
        inputNovo2.addEventListener('input', calcularLinhaEtotais);
    });

    function calcularLinhaEtotais() 
    {
        const linhas = tabela.querySelectorAll('tr');
        for (let i = 1; i < linhas.length; i++) 
        {
            const linha = linhas[i];
            const celula1 = linha.querySelector('td:nth-child(1) input');
            const celula2 = linha.querySelector('td:nth-child(2) input');
            const celulaSoma = linha.querySelector('td:nth-child(3) input');
            const valor1 = parseFloat(celula1.value) || 0;
            const valor2 = parseFloat(celula2.value)
        }
    }
    </script>
</body>
</html>

Entrar

A planilha em HTML

Pergunta

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades