Javascript Buscar Info da Tabela

diogorocha18 · 8 de janeiro de 2022

Boa noite,

Estou a fazer um bot para o discord para um jogo e estou aqui com algumas dificuldades porque a experiencia não é a melhor..

É o seguinte, eu preciso que me mande na variavel "color" 3 coisas diferentes, ou melhor, me escreva na cor dependendo do innerHTML tiver "small", "medium" ou "large" escreva na variavel color "verde", "castanho" ou "vermelho".

Como posso fazer para essa variavel procurar uma das tres variaveis?

for (var i = 1, row; row = table.rows[i]; i++) {
  
    var color = 
    var player = row.cells[0].innerText;
    var status = row.cells[1].innerText;

    if (status){ msg += "  " + color + " --->  " + player + "  ---->   " + status + "     \n" }
}

Obrigado pela ajuda.

Abraço

washalbano · 10 de janeiro de 2022

const colors = { small: "verde", medium: "castanho", large: "vermelho" };

Defina as possíveis cores e use assim:

colors[o-innerHTML-que-o-sr-mencionou]

Não vi acima, o trecho de script que captura o innerHTML que o sr. mencionou

diogorocha18 · 11 de janeiro de 2022

@washalbano

Ficou assim:

for (var i = 1, row; row = table.rows[i]; i++) {

    const colors = { small: "verde", medium: "castanho", large: "vermelho" };

    var color = row.cells[0].innerText;
    var player = row.cells[0].innerText;
    var status = row.cells[1].innerText;

    if (status){ msg += "  " + colors + "  --->  **" + player + "**  --->     **" + status + "**                  \n" }
}

no entanto ao enviar a mensagem pretendida, na cor aparece [object Object]

o innertext da color é igual ao do player

Cumprimentos

washalbano · 11 de janeiro de 2022

Onde o sr. usa o objeto colors, passe o índice assim:

colors[color]

Só lembrando q só vai funcionar se o valor de color for exatamente igual a small, medium ou large
sem espaços ou outros caracteres

diogorocha18 · 12 de janeiro de 2022

@washalbano coloquei da forma que disse sem resultado, aparece sempre o valor como "undefined"

for (var i = 1, row; row = table.rows[i]; i++) {

    const colors = { small: "verde", medium: "castanho", large: "vermelho" };

    var color = row.cells[0].innerText;
    var player = row.cells[0].innerText;
    var status = row.cells[1].innerText;

    if (status){ msg += "  " + colors[color] + "  --->  **" + player + "**  --->     **" + status + "**                  \n" }
}

E na pagina atual ate tem o valor large:

Cumprimentos

washalbano · 12 de janeiro de 2022

Certifique-se de que color tem valor
E que o valor de color é igual a um índice de colors

diogorocha18 · 13 de janeiro de 2022

8 horas atrás, washalbano disse:

Certifique-se de que color tem valor
E que o valor de color é igual a um índice de colors

Como assim? não entendi?

washalbano · 13 de janeiro de 2022

É que se a variável color, não tiver valor ou seu valor for inválido, vai dar erro.

Como seu exemplo não é testável, nem verificável, escrevi um trecho testável e verificável pro sr. testar, verificar e comprovar que com valores válidos, funciona perfeitamente:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<main>
  <table border="1">
    <tbody>
    <tr>
      <td>small</td>
      <td>Player 1 - row 1 - cell2</td>
      <td class="message-receiver"></td>
    </tr>
    <tr>
      <td>medium</td>
      <td>Player 2 - row 2 - cell2</td>
      <td class="message-receiver"></td>
    </tr>
    <tr>
      <td>large</td>
      <td>Player 3 - row 3 - cell2</td>
      <td class="message-receiver"></td>
    </tr>
    <tr>
      <td>valor inválido</td>
      <td>Player 4 - row 4 - cell2</td>
      <td class="message-receiver"></td>
    </tr>
    </tbody>
  </table>
</main>
</body>
<script>
    const table = document.querySelector('table');

    const colors = {small: "verde", medium: "castanho", large: "vermelho"};

    for (const row of table.rows) {

        const color = row.cells[0].innerText;
        const player = row.cells[1].innerText;
        const messagesReceiver = row.cells[2];

        messagesReceiver.innerText = `${colors[color]} --->  ** ${player} **  --->     **`
    }
</script>
</html>

diogorocha18 · 16 de janeiro de 2022

@washalbano certo, mas aqui a questão é que o valor "small", "medium" ou "large" vai buscar a uma imagem que tem esse valor no link, entende?

o exemplo testavel para o que pedi é o seguinte:

<div style="padding-top: 10px; clear:both">
                    
<div id="commands_outgoings" class="commands-container" data-type="towards_village" data-village="15342" data-commands="2">

    <table class="vis" style="width:100%">
        <tbody><tr>
            <th width="52%">
                Os seus comandos
                <span class="commands-command-count">
               (2)
            </span>
            </th>
            <th width="33%">Chegada</th>
            <th width="15%">Chega em</th>
        </tr>

                                                    <tr class="command-row">
                <td>
                    <span class="quickedit-out" data-id="1370924111" data-ignore-icons="1">
                    <span class="quickedit-content">
                        <a href="/game.php?village=2807&amp;screen=info_command&amp;id=1370924111&amp;type=other">
                            <span class="icon-container">
                                <span class="commandicon-ally command_hover_details" data-command-id="1370924111" data-icon-hint="Pequeno ataque (1-1000 tropas) (Comando do membro da Tribo / Amigo)" data-command-type="attack">
	<img src="https://dspt.innogamescdn.com/asset/9b87e56e/graphic/command/attack_small.png" alt="">
</span><span class="command_hover_details" data-command-id="1370924111" data-icon-hint="Com batedores" data-command-type="attack">
	<img src="https://dspt.innogamescdn.com/asset/9b87e56e/graphic/command/spy.png" alt="">
</span>
                            </span>
                            <span class="quickedit-label">
                                 Alexandre Magno
                            </span>
                        </a>

                                            </span>
                </span>
                </td>

                                                        <td>amanhã às 14:27:22:<span class="grey small">001</span> horas</td>
                
                <td>
                    <span class="" data-endtime="1642429642">25:43:21</span>
                                    </td>
            </tr>
                                            <tr class="command-row">
                <td>
                    <span class="quickedit-out" data-id="408204837" data-ignore-icons="1">
                    <span class="quickedit-content">
                        <a href="/game.php?village=2807&amp;screen=info_command&amp;id=408204837&amp;type=other">
                            <span class="icon-container">
                                <span class="command_hover_details" data-command-id="408204837" data-icon-hint="Grande ataque (5000+ tropas)" data-command-type="attack">
	<img src="https://dspt.innogamescdn.com/asset/9b87e56e/graphic/command/attack_large.png" alt="">
</span><span class="command_hover_details" data-command-id="408204837" data-icon-hint="Com batedores" data-command-type="attack">
	<img src="https://dspt.innogamescdn.com/asset/9b87e56e/graphic/command/spy.png" alt="">
</span>
                            </span>
                            <span class="quickedit-label">
                                 0184 - OneBiNine
                            </span>
                        </a>

                                                    <a class="rename-icon" href="#" title="Renomear"></a>
                                            </span>
                </span>
                </td>

                                                        <td>a 19.01. às 18:26:02:<span class="grey small">462</span> horas</td>
                
                <td>
                    <span class="" data-endtime="1642616762">77:42:01</span>
                                    </td>
            </tr>
            </tbody></table>
</div>
                </div>