How to change label type within a table depending on what is inserted

Question

Good afternoon, I am trying to assemble a table with Bootstrap and would like to change the label type depending on what was written inside the cell.

Table example:

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

Situation: If instead of "Text" it was written "Ball", I wish I could change the label from "Primary" to "Success" or any other type, and I have no idea how to achieve this result.

I appreciate all kinds of help with this code because I’m a beginner with Javascript.

Answer 1

If you want to do with jQuery can do so:

$(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>

Answer 2

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>

Or if you prefer

$(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() - finds the elements that meet the requested expression that are descended from the selector
• jQuery - . attr() - returns or sets the value of an attribute:
• jQuery - . each() - specifies a function to be executed for each corresponding item.

Answer 3

You can just go through your table with the each() jquery and use a Javascript switch to determine which class according to the element value:

$(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>