Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • TABELA INTERATIVA ROLETA V6 - Limitacao de Elementos Por Linha e Cor de Contorno Por Valores Seguidos E COMPARA SE HÁ LETRAS IGUAIS

    Enviado por

    agepema85
    6 visualizações4 páginas

    Título original

    TABELA INTERATIVA ROLETA V6 - limitacao de elementos por linha e cor de contorno por valores seguidos E COMPARA SE HÁ LETRAS IGUAIS

    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
    6 visualizações4 páginas

    TABELA INTERATIVA ROLETA V6 - Limitacao de Elementos Por Linha e Cor de Contorno Por Valores Seguidos E COMPARA SE HÁ LETRAS IGUAIS

    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

    Aqui está o código atualizado com os atributos `id_duzia`, `id_coluna` e

    `id_numero` adicionados a cada célula da tabela `number-table`:

    ```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" id_duzia="1" id_coluna="1" id_numero="1">03</td>
    <td class="duzia1" id_duzia="1" id_coluna="2" id_numero="2">06</td>
    <td class="duzia1" id_duzia="1" id_coluna="3" id_numero="3">09</td>
    <td class="duzia1" id_duzia="1" id_coluna="4" id_numero="4">12</td>
    <td class="duzia2" id_duzia="2" id_coluna="1" id_numero="5">15</td>
    <td class="duzia2" id_duzia="2" id_coluna="2" id_numero="6">18</td>
    <td class="duzia2" id_duzia="2" id_coluna="3" id_numero="7">21</td>
    <td class="duzia2" id_duzia="2" id_coluna="4" id_numero="8">24</td>
    <td class="duzia3" id_duzia="3" id_coluna="1" id_numero="9">27</td>
    <td class="duzia3" id_duzia="3" id_coluna="2" id_numero="10">30</td>
    <td class="duzia3" id_duzia="3" id_coluna="3" id_numero="11">33</td>
    <td class="duzia3" id_duzia="3" id_coluna="4" id_numero="12">36</td>
    </tr>
    <tr>
    <td class="duzia1" id_duzia="1" id_coluna="1" id_numero="13">02</td>
    <td class="duzia1" id_duzia="1" id_coluna="2" id_numero="14">05</td>
    <td class="duzia1" id_duzia="1" id_coluna="3" id_numero="15">08</td>
    <td class="duzia1" id_duzia="1" id_coluna="4" id_numero="16">11</td>
    <td class="duzia2" id_duzia="2" id_coluna="1" id_numero="17">14</td>
    <td class="duzia2" id_duzia="2" id_coluna="2" id_numero="18">17</td>
    <td class="duzia2" id_duzia="2" id_coluna="3" id_numero="19">20</td>
    <td class="duzia2" id_duzia="2" id_coluna="4" id_numero="20">23</td>
    <td class="duzia3" id_duzia="3" id_coluna="1" id_numero="21">26</td>
    <td class="duzia3" id_duzia="3" id_coluna="2" id_numero="22">29</td>
    <td class="duzia3" id_duzia="3" id_coluna="3" id_numero="23">32</td>
    <td class="duzia3" id_duzia="3" id_coluna="4" id_numero="24">35</td>
    </tr>
    <tr>
    <td class="duzia1" id_duzia="1" id_coluna="1" id_numero="25">01</td>
    <td class="duzia1" id_duzia="1" id_col

    una="2" id_numero="26">04</td>
    <td class="duzia1" id_duzia="1" id_coluna="3" id_numero="27">07</td>
    <td class="duzia1" id_duzia="1" id_coluna="4" id_numero="28">10</td>
    <td class="duzia2" id_duzia="2" id_coluna="1" id_numero="29">13</td>
    <td class="duzia2" id_duzia="2" id_coluna="2" id_numero="30">16</td>
    <td class="duzia2" id_duzia="2" id_coluna="3" id_numero="31">19</td>
    <td class="duzia2" id_duzia="2" id_coluna="4" id_numero="32">22</td>
    <td class="duzia3" id_duzia="3" id_coluna="1" id_numero="33">25</td>
    <td class="duzia3" id_duzia="3" id_coluna="2" id_numero="34">28</td>
    <td class="duzia3" id_duzia="3" id_coluna="3" id_numero="35">31</td>
    <td class="duzia3" id_duzia="3" id_coluna="4" id_numero="36">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.pop();
    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();
    }
    });

    function updateDuplicateWordsColor(cell1, cell2) {


    const words1 = cell1.textContent.split('\n');
    const words2 = cell2.textContent.split('\n');

    for (let i = 0; i < words1.length; i++) {


    if (words1[i] === words2[i]) {
    cell1.style.color = 'red';
    cell2.style.color = 'red';
    }
    }
    }
    </script>

    </body>
    </html>
    ```

    Agora cada célula da tabela possui os atributos `id_duzia`, `id_coluna` e


    `id_numero` que recebem os números correspondentes da duzia, coluna e número da
    célula, respectivamente.

    Você também pode gostar