0

Boa tarde, estou tentando montar uma tabela com Bootstrap e gostaria de mudar o tipo da label, dependendo do que estivesse escrito dentro da célula.

Exemplo de tabela:

<table>
<tr>
<td><span class="label label-primary">Texto</span></td>
</tr>
</table>

Situação: Se ao invés de "Texto" estivesse escrito "Bola", queria poder mudar a label de "primary" para "success" ou qualquer outro tipo, e não faço a minima ideia de como alcançar esse resultado.

Agradeço todo tipo de ajuda com esse código, pois sou iniciante com JavaScript.

3 Respostas 3

1

var table = $('table');

mudarClasse(table);

function mudarClasse(table){
    table.find('td').each(function(){
        var obj = $(this).find('span');
        
        if (obj.text() == 'Bola') {
           obj.attr("class","label-success");
        } else {      
           obj.attr("class","label-primary");      
         } 
        
    } ); 
    
}
.label-primary {
  color: green;
}

.label-success {
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
    <tr>
        <td>
            <span>Texto</span>
        </td>
        <td>
            <span>Bola</span>
        </td>
        <td>
            <span>Gol do Brasil</span>
        </td>
        <td>
            <span>Bola</span>
        </td>
    </tr>
</table>

Ou se preferir

$(document).ready(function() {
     var table = $('table');
        table.find('td').each(function(){
            var obj = $(this).find('span');
            
            if (obj.text() == 'Bola') {
               obj.attr("class","label-success");
            }
            
        }); 
        
});
    .label-primary {
      color: green;
    }

    .label-success {
      color: blue;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <table>
        <tr>
            <td>
                <span class="label label-primary">Texto</span>
            </td>
            <td>
                <span class="label label-primary">Bola</span>
            </td>
            <td>
                <span class="label label-primary">Gol do Brasil</span>
            </td>
            <td>
                <span class="label label-primary">Bola</span>
            </td>
        </tr>
    </table>

  • jQuery - .find() - encontra os elementos que atendem à expressão solicitada que sejam descendentes do seletor
  • jQuery - .attr() - retorna ou define o valor de um atributo:
  • jQuery - .each() - especifica uma função a ser executada para cada elemento correspondente.
1

Se vc quiser fazer com jQuery dá para fazer assim:

$(document).ready(function() {
  var texto = $("span").text(); //aqui vc pega o texto
  
  if(texto == "Bola"){
    $("span").attr("class","label-secondary"); //aqui vc muda a classe 
  } else {
    $("span").attr("class","label-primary"); // aqui fica com a classe padrão
  }
})
.label-primary {
  color: black;
}

.label-secondary {
  color: red;
  text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td><span class="label label-primary">Bola</span></td>
  </tr>
</table>

0

Você pode simplesmente percorrer sua table com o each() do JQuery e usar um switch do JavaScript, para determinar qual classe de acordo com o valor do elemento:

$(function(){
    $('#minhaTable tr td').each(function(){
        let span = $(this).find('span');
        let valorSpan = span.text();
        let classe = "";
        
        switch(valorSpan){
            case "Maria":
                classe = "success";
                break;
            case "Matheus":
                classe = "danger";
                break;
            default:
                classe = "primary";
                break;            
        }
        
        span.addClass('text-'+classe);
        
    });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table" id="minhaTable">
    <thead>
        <tr>
           <th>Nome:</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <span>Maria</span>
            </td>
        </tr>
        <tr>
            <td>
                <span>João</span>
            </td>
        </tr>
        <tr>
            <td>
                <span>Roberto</span>
            </td>
        </tr>
        <tr>
            <td>
                <span>Maria</span>
            </td>
        </tr>
        <tr>
            <td>
                <span>Matheus</span>
            </td>
        </tr>
    </tbody>
</table>

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 .