CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Progs
Progs

Reputation: 737

Bootstrap table doesn't change color of cells

I have a bootstrap table that loads data from a json file, what i'm trying to do is that depending on the value of the data in the table, is to color the each cell. those colors are defined in a css file.

I tested the script on a very simple html file and it works, but trying to use that same script to the bootstrap table, it seems it doesn't affect the cell colors. I'm not sure if because bootstrap tables have their on css style, it may affect the outcome of my script.

my javascript file color_celda.js

function colorCeldas() {


var table = document.getElementById('tablaIndicador'),
    cells = table.getElementsByTagName('td');

var val;

for (var i = 0, len = cells.length; i < len; i++) {
   val= parseInt(cells[i].innerHTML,10);

      if (val > 75 && val <= 100) { //verde

         cells[i].addClass('verdeBg ');

        } else if (val >= 50 && val <= 75) { //naranja

            cells[i].addClass('orangeBg ');

        } else if (val >= 0 && val < 50) { //rojo

            cells[i].addClass('rojoBg');

        } else  { // sin datos gris


           alert("nada");
           cells[i].addClass('grisBg ');

        }

    }

}

the html code

...
     <script src="./scripts/color_celda.js"></script>
 ...
<body onload="colorCeldas()">
...  



 <table class="table"  id="tablaIndicador">
                    <tr>
                        <th>Oferta</th>
                        <th>Demanda</th>
                        <th>Seguridad</th>
                        <th>Comunidad Receptora</th>
                        <th>Mercadotecnia</th>
                        <th>Accesibilidad</th>
                    </tr>
                    <tr ng-repeat="pueblo in pueblos">
                        <td>{{pueblo.oferta}}</td>
                        <td>{{pueblo.demanda}}</td>
                        <td>{{pueblo.seguridad}}</td>
                        <td>{{pueblo.comunidad}}</td>
                        <td>{{pueblo.mercadotecnia}}</td>
                        <td>{{pueblo.accesibilidad}}</td>
                    </tr>
                    </table>

EDIT: checking the html file on a web browser throws this message TypeError: cells[i].addClass is not a function

EDIT 2: it works on this fiddle https://jsfiddle.net/davidThomas/Zqk6r/401/

just change the css for this one:

th, td {
    border: 1px solid #000;
    padding: 0.2em 0.3em 0.1em 0.3em;
}


.verdeBg {
    background: green;
}

.orangeBg {
    background: orange;
}

.rojoBg {
    background: red;
}

.grisBg {
    background: gray;
}

and the javascript code for this one

var val;

for (var i = 0, len = cells.length; i < len; i++) {

    val = parseInt(cells[i].innerHTML,10);

       if (val > 75 && val <= 100) { //verde

         cells[i].addClass('verdeBg ');

        } else if (val >= 50 && val <= 75) { //naranja

            cells[i].addClass('orangeBg ');

        } else if (val >= 0 && val < 50) { //rojo

            cells[i].addClass('rojoBg');

        } else  { // sin datos gris

           cells[i].addClass('grisBg ');

        }

}

Upvotes: 0

Views: 764

Answers (1)

Iftah
Iftah

Reputation: 9572

addClass is not a native DOM element method, which is why it fails for you. The addClass method is provided by jQuery or (as in the jsfiddle you linked to) the Mootools framework (and probably also a bunch of other JS frameworks).

Mootools takes care to add this method to the element prototype, which is why it works for you in the jsfiddle.

If you are using jQuery then do $(cells[i]).addClass(className).

If you are not using jQuery:

var el = cells[i];
if (el.classList)
  el.classList.add(className);
else
  el.className += ' ' + className;

Upvotes: 2

Related Questions