Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Tabela Interativa Roleta

    Enviado por

    agepema85
    5 visualizações3 páginas

    Título original

    TABELA INTERATIVA ROLETA

    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
    5 visualizações3 páginas

    Tabela Interativa Roleta

    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 3

    Claro!

    Aqui está o código atualizado para que haja uma quebra de texto após cada
    palavra inserida na div "recebeTexto":

    ```html
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .number-table {
    border-collapse: collapse;
    }
    .number-table td {
    border: 1px solid black;
    width: 50px;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    font-size: 18px;
    }
    .duzia1 {
    background-color: lightblue;
    }
    .duzia2 {
    background-color: lightgreen;
    }
    .duzia3 {
    background-color: lightpink;
    }
    .selected-cell {
    padding: 5px;
    font-weight: bold;
    display: inline-block;
    white-space: pre-wrap;
    }
    </style>
    </head>
    <body>

    <h2>Tabela Numerada</h2>

    <table class="number-table">
    <tr>
    <td class="duzia1">3</td>
    <td class="duzia1">6</td>
    <td class="duzia1">9</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">2</td>
    <td class="duzia1">5</td>
    <td class="duzia1">8</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">1</td>
    <td class="duzia1">4</td>
    <td class="duzia1">7</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-direction: row;"></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' }
    ];

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


    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('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;
    recebeTexto.insertBefore(selectedCell, recebeTexto.firstChild);
    });
    });

    removeButton.addEventListener('click', () => {
    recebeTexto.removeChild(recebeTexto.firstChild);
    });

    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 texto inserido na div "recebeTexto" terá uma quebra de texto após cada
    palavra, como você solicitou. Além disso, a cor de fundo das células de destino foi
    removida, como requisitado anteriormente.

    Você também pode gostar