How to change the type of label inside a table depending on what is inserted

Navigation
0

Good afternoon, I'm trying to build 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>

Status: If instead of "Text" it was written "Ball", I wanted to be able to change the label from "primary" to "success" or any other type, and I have no idea how to achieve this result. p>

Thanks for any help with this code, as I'm a beginner with JavaScript.

    
asked by anonymous 04.07.2018 / 18:59

3 answers

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>GoldoBrasil</span></td><td><span>Bola</span></td></tr></table>

Orifyouprefer

$(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><spanclass="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>
04.07.2018 / 22:10
1

If you want to do with jQuery, you can do it like this: 

$(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><spanclass="label label-primary">Bola</span></td>
  </tr>
</table>
    
04.07.2018 / 19:59
0

You can simply wrap your table with each() of JQuery and use a JavaScript switch, to determine which class according to the value of the element: 

$(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><scriptsrc="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>
    
04.07.2018 / 19:53
Problem with sharing Back to previous page - mvc page razor