0

Tenho o seguinte codigo HTML:

<div class="">
    <table>
        <tbody>
            <tr>TITULO DO BOX</tr>
        </tbody>
    </table>

    <table class="classeTable">
        <tbody>
            <tr>
                <td>Esporte:</td>
                <td>Futebol</td>
            </tr>
            <tr>
                <td>Esporte:</td>
                <td>Volei</td>
            </tr>
            <tr>
                <td>Esporte:</td>
                <td>Basquete</td>
            </tr>
        </tbody>
    </table>
<div>

No momento, eu tenho varias div sem identificação nenhuma e dentro dessas div eu tenho 2 table, a primeira table tem o TITULO DO BOX e apenas isso, já a segunda table tem o conteúdo do box porém tem uma class que pode ajudar, porém essa mesma class é usada em varios outros lugares, então não daria pra ser usada como um identificador, o que poderia ser usado, seria o (TITULO DO BOX + class="classeTable"), como eu poderia juntar essas 2 informações pra identificar exatamente que eu gostaria de pegar os valores Futebol/Volei/Basquete?

Uma solução seria:

$(".classeTable > tbody > tr:nth-child(1) > td:nth-child(2)").text();
$(".classeTable > tbody > tr:nth-child(2) > td:nth-child(2)").text();
$(".classeTable > tbody > tr:nth-child(3) > td:nth-child(2)").text();

Mas como eu mencionei anteriormente, essa class="classeTable" está sendo usada em diversos lugares, então o jQuery não saberia ao certo qual class="classeTable" escolher.

Algo assim seria o ideal:

$("TITULO DO BOX .classeTable > tbody > tr:nth-child(1) > td:nth-child(2)").text();
$("TITULO DO BOX .classeTable > tbody > tr:nth-child(2) > td:nth-child(2)").text();
$("TITULO DO BOX .classeTable > tbody > tr:nth-child(3) > td:nth-child(2)").text();

Porém não sei ao certo como fazer isso e se tem como fazer isso. Talvez tenha algum jeito diferente que eu não tenho conhecimento.

2
  • Não tem muito sentido a pergunta. Tudo bem, você quer pegar os textos citados dentro de uma determinada tabela que não tem um identificador único e próprio, blz. A pergunta que eu faço é: por que você quer pegar o texto, por exemplo, "futebol" dessa tabela? O que faz dessa tabela especial? Aí você poderia responder: "porque tem o texto 'futebol' que eu quero pegar"... Sim, mas só essa tabela tem esse texto? Se for só ela, basta fazer um loop nas tabelas e ver qual que tem o texto "futebol". Simples assim.
    – Sam
    Commented 2/03/2018 às 13:34
  • Só complementando, para selecionar um elemento, alguma coisa de diferente dos outros ele deve ter, seja uma letra que os outros não tem, uma vírgula, uma string.. enfim, qualquer coisa que possa diferenciá-lo dos outros irmãos.
    – Sam
    Commented 2/03/2018 às 13:51

1 Resposta 1

1

É possível sim, porém da forma que está, é terrivelmente complicado. Isso porque <tr>TITULO DO BOX</tr> é inválido. O navegador irá remover esse texto e irá adiciona-lo antes da tabela.

Antes, é necessário corrigir sua primeira tabela. O correto é <tr><td>TITULO DO BOX</td></tr>.

Feito isso, vamos ao código (já comentado):

/* Captura o elemento "tr" que contém o texto "TITULO DO BOX" */
let trs = $('table tbody tr:contains("TITULO DO BOX")')

          /* Retorna para o elemento pai, o table */
          .parents('table')
          
          /* Captura o próximo elemento da hierarquia */
          .next()
          
          /* Captura todos os elementos "td" que estão na segunda posição */
          .find('tr td:eq(1)');

/* Percorre todos os elementos e exibe o valor na tela. */
$.map( trs, el => {
  console.log( el.innerText )
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="">
    <table>
        <tbody>
            <tr><td>TITULO DO BOX</td></tr>
        </tbody>
    </table>

    <table class="classeTable">
        <tbody>
            <tr>
                <td>Esporte:</td>
                <td>Futebol</td>
            </tr>
            <tr>
                <td>Esporte:</td>
                <td>Volei</td>
            </tr>
            <tr>
                <td>Esporte:</td>
                <td>Basquete</td>
            </tr>
        </tbody>
    </table>
<div>

Caso você possa refatorar, você pode fazer da seguinte forma:

/* Captura o elemento "tr" que contém o texto "TITULO DO BOX" */
let trs = $('table thead th:contains("TITULO DO BOX")')

          /* Retorna para o elemento pai, o table */
          .parents('table')
          
          /* Captura todos os elementos "td" que estão na segunda posição */
          .find('tr td:eq(1)');

/* Percorre todos os elementos e exibe o valor na tela. */
$.map( trs, el => {
  console.log( el.innerText )
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="">
    <table class="classeTable">
        <thead>
          <tr colspan="2">
            <th>TITULO DO BOX</th>
          </tr>
        </thead>
        <tbody>
            <tr>
                <td>Esporte:</td>
                <td>Futebol</td>
            </tr>
            <tr>
                <td>Esporte:</td>
                <td>Volei</td>
            </tr>
            <tr>
                <td>Esporte:</td>
                <td>Basquete</td>
            </tr>
        </tbody>
    </table>
<div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .