show the column of the table in a color if the value in a cell is passed javascript

Question

I have a table for some calculations and if cell value is passed I want to show that column of the table in a color. I have this for the moment :

<script type="text/javascript">
   $(document).ready(function(){
     $('#myTable td.y_n').each(function(){
     if ($(this).text() < 0.4) {
         $(this).css('background-color','#a9edb8');
     }
     else {
       $(this).css('background-color','#eda9ca');
     }
   });
 });
</script>

but this is only for the cell.

Any idea? thanks!

Answer 1

 $(document).ready(function() { $('#myTable td.y_n').each(function(i,v) { if (parseFloat($(this).text()) < 0.4) { $(this).closest("table").find("td").eq(i).addClass("pass"); } else { $(this).closest("table").find("td").eq(i).addClass("fail"); } }); }); 

 .pass { background-color: #a9edb8 } .fail { background-color: #eda9ca } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="myTable"> <tr> <td class='y_n'> .3 </td> <td class='y_n'> .6 </td> </tr> <tr> <td class='y_n'> .2 </td> <td class='y_n'> .9 </td> </tr> <tr> <td class='y_n'> .9 </td> <td class='y_n'> .1 </td> </tr> </table> 

Use parseFloat() then compare

Answer 2

If I understand your goal correctly, you want to set the background color of an entire column if one if the y_n cells contains a numeric value and choose the color based on that value. To set the entire column, you could get the tablecells at the corresponding indices, but easier is to use a column group:

 $(document).ready(function(){ var cols = $('#myTable col'); //get the column groups $('#myTable td.y_n').each(function(){ var text = this.innerText; //text of the td if(text.length > 0 && !isNaN(this.innerText)){ //check if it's a number var ind = $(this).index(); //the index of the td inside its tr = the column index $(cols[ind]).css('background-color', parseFloat(text) < 0.4 ? '#a9edb8' : '#eda9ca'); //set the col of the column group } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="myTable"> <colgroup> <col> <col> <col> </colgroup> <tr> <td>r1</td> <td class='y_n'></td> <td class='y_n'>.7</td> </tr> <tr> <td>r2</td> <td class='y_n'>.1</td> <td class='y_n'>.6</td> </tr> <tr> <td>r3</td> <td>a</td> <td>b</td> </tr> </table> 

Answer 3

I am not saying this is the best way because i have use so many loops, but you can achieve your requirement by this code.

$(document).ready(function() {
    $('#myTable tr').each(function(index,event) {
    $(event).children('td').each(function(indexI,eventI) {
      if ($(eventI).text() < 0.4) {
        $('#myTable tr').each(function(indexIn,eventIn) {
            $(eventIn).children('td').eq(indexI).css('background-   color','#eda9ca');
        });
      } 
    }); 
  });
});

Best of luck :)

Answer 4

You can also achieve like this. in each i is index and e will be current element. And i just added with="100" to table so its looks proper.

 $(document).ready(function() { $('#myTable td.y_n').each(function(i,e) { if ($(e).text() < 0.4) { $(e).css('background-color','#a9edb8'); } else { $(e).css('background-color','#eda9ca'); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="myTable" width="100"> <tr> <td class='y_n'> .3 </td> </tr> <tr> <td class='y_n'> .6 </td> </tr> </table> 

Answer 5

If there are many rows (a lot of them) in your table, you might be better of using colgroups with col structure in your table, and put the background on the col-element. Anyway, you can always do this:

 $(function() { $('table a').click(function(e) { e.preventDefault(); var index = $(this).html(); colHighlight($(this).closest('table'), index); }); }); function colHighlight(table, colIndex) { var bodyCells = table.find('tbody td'); bodyCells.css('background-color', 'transparent'); bodyCells.filter(':nth-child(' + colIndex + ')').css({ 'background-color': 'yellow' }); } 

 table, td, th { border: 1px solid #000; border-collapse: collapse; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> </tr> </thead> <tfoot> <tr> <th colspan="3"> Highlight column: <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> </th> </tr> </tfoot> <tbody> <tr> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>Content</td> <td>Content</td> <td>Content</td> </tr> </tbody> </table>