Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • TABELA INTERATIVA ROLETA V5 - Limitacao de Elementos Por Linha e Cor de Contorno Por Valores Seguidos

    Enviado por

    agepema85
    1 visualizações4 páginas

    Título original

    TABELA INTERATIVA ROLETA V5 - limitacao de elementos por linha e cor de contorno por valores seguidos

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    TXT, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato TXT, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    1 visualizações4 páginas

    TABELA INTERATIVA ROLETA V5 - Limitacao de Elementos Por Linha e Cor de Contorno Por Valores Seguidos

    Enviado por

    agepema85

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato TXT, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 4

    Claro, vou atualizar o código conforme sua solicitação.

    Aqui está o código


    modificado:

    ```html
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .number-table {
    border-collapse: collapse;
    }
    .number-table td {
    border: 2px solid black;
    width: 50px;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    font-size: 18px;
    cursor: pointer;
    }
    .duzia1 {
    background-color: lightblue;
    }
    .duzia2 {
    background-color: lightgreen;
    }
    .duzia3 {
    background-color: lightpink;
    }
    .selected-cell {
    padding: 5px;
    font-weight: bold;
    white-space: pre-wrap;
    border: 2px solid black;
    margin: 5px;
    position: relative;
    }
    .selected-text {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    }
    .duplicate {
    border: 2px solid red;
    }
    </style>
    </head>
    <body>

    <h2>Tabela Numerada</h2>

    <table class="number-table">
    <tr>
    <td class="duzia1">03</td>
    <td class="duzia1">06</td>
    <td class="duzia1">09</td>
    <td class="duzia1">12</td>
    <td class="duzia2">15</td>
    <td class="duzia2">18</td>
    <td class="duzia2">21</td>
    <td class="duzia2">24</td>
    <td class="duzia3">27</td>
    <td class="duzia3">30</td>
    <td class="duzia3">33</td>
    <td class="duzia3">36</td>
    </tr>
    <tr>
    <td class="duzia1">02</td>
    <td class="duzia1">05</td>
    <td class="duzia1">08</td>
    <td class="duzia1">11</td>
    <td class="duzia2">14</td>
    <td class="duzia2">17</td>
    <td class="duzia2">20</td>
    <td class="duzia2">23</td>
    <td class="duzia3">26</td>
    <td class="duzia3">29</td>
    <td class="duzia3">32</td>
    <td class="duzia3">35</td>
    </tr>
    <tr>
    <td class="duzia1">01</td>
    <td class="duzia1">04</td>
    <td class="duzia1">07</td>
    <td class="duzia1">10</td>
    <td class="duzia2">13</td>
    <td class="duzia2">16</td>
    <td class="duzia2">19</td>
    <td class="duzia2">22</td>
    <td class="duzia3">25</td>
    <td class="duzia3">28</td>
    <td class="duzia3">31</td>
    <td class="duzia3">34</td>
    </tr>
    </table>

    <p>Selecione uma célula:</p>


    <div id="recebeTexto" style="display: flex; flex-wrap: wrap;"></div>
    <button id="remove-button">Remover Última Inserção</button>
    <button id="save-button">Salvar Texto</button>

    <script>
    const numberCells = document.querySelectorAll('.number-table td');
    const recebeTexto = document.getElementById('recebeTexto');
    const removeButton = document.getElementById('remove-button');
    const saveButton = document.getElementById('save-button');
    const data = [
    { duzia: 'D1', coluna: 'C1', bgColor: 'lightblue' },
    { duzia: 'D1', coluna: 'C2', bgColor: 'lightblue' },
    { duzia: 'D1', coluna: 'C3', bgColor: 'lightblue' },
    { duzia: 'D1', coluna: 'C4', bgColor: 'lightblue' },
    { duzia: 'D2', coluna: 'C1', bgColor: 'lightgreen' },
    { duzia: 'D2', coluna: 'C2', bgColor: 'lightgreen' },
    { duzia: 'D2', coluna: 'C3', bgColor: 'lightgreen' },
    { duzia: 'D2', coluna: 'C4', bgColor: 'lightgreen' },
    { duzia: 'D3', coluna: 'C1', bgColor: 'lightpink' },
    { duzia: 'D3', coluna: 'C2', bgColor: 'lightpink' },
    { duzia: 'D3', coluna: 'C3', bgColor: 'lightpink' },
    { duzia: 'D3', coluna: 'C4', bgColor: 'lightpink' }
    ];

    const selectedItems = new Set();


    let prevSelectedCell = null;

    numberCells.forEach((cell, index, cellsArray) => {


    const num = cell.textContent;
    const rowIndex = Math.floor(index / 12);
    const colIndex = index % 12;
    const duzia = data[colIndex].duzia;
    const coluna = data[rowIndex].coluna;
    const bgColor = data[colIndex].bgColor;

    cell.addEventListener('mouseover', () => {
    cell.style.cursor = 'pointer';
    });

    cell.addEventListener('click', () => {
    const selectedText = `N${num}\n${coluna}\n${duzia}`;
    const selectedCell = document.createElement('div');
    selectedCell.textContent = selectedText;
    selectedCell.className = 'selected-cell';
    selectedCell.style.color = bgColor;

    if (prevSelectedCell && prevSelectedCell.textContent ===


    selectedCell.textContent) {
    prevSelectedCell.classList.add('duplicate');
    selectedCell.classList.add('duplicate');
    } else {
    selectedItems.add(selectedText);
    }

    recebeTexto.appendChild(selectedCell);
    prevSelectedCell = selectedCell;
    });
    });

    removeButton.addEventListener('click', () => {
    const lastCell = recebeTexto.lastChild;
    if (lastCell) {
    selectedItems

    .delete(lastCell.textContent);
    recebeTexto.removeChild(lastCell);
    }
    });

    saveButton.addEventListener('click', () => {
    const confirmSave = confirm('Deseja salvar o texto?');
    if (confirmSave) {
    const lines = Array.from(recebeTexto.children).map(cell => cell.textContent);
    const textToSave = lines.join('\n\n');
    const blob = new Blob([textToSave], { type: 'text/plain' });
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = 'dados_copiados.txt';
    a.click();
    }
    });
    </script>

    </body>
    </html>
    ```

    Agora o código deve funcionar conforme suas especificações, alterando o contorno


    das células quando o valor inserido for igual ao valor da célula anterior.

    Você também pode gostar