JSFiddle - React, Tailwind, and code Playground

How to apply css style on determine row in html table

by Akram kamal

HTML

<form>
    <table border="1" id="miaTbella">
        <tr>
            <th rowspan="3">N.</th>
            <th rowspan="3">Cognome</th>
            <th rowspan="3">Nome</th>
        </tr>
        <tr>
            <th colspan="2">Religione</th>
            <th colspan="2">Italiano</th>
            <th colspan="2">Storia</th>
            <th colspan="2">Inglese</th>
            <th colspan="2">Matematica</th>
            <th colspan="2">Scienze</th>
            <th colspan="2">Fisica</th>
            <th colspan="2">Diritto</th>
            <th colspan="2">Ed. Fisica</th>
            <th rowspan="2">Condotta</th>
            <th rowspan="2">Esito</th>
        </tr>
        <tr>
            <th>Voto </th> 	   	 
	        <th >Ass. </th> 
            <th>Voto </th> 	   	 
	        <th >Ass. </th> 
            <th>Voto </th> 	   	 
	        <th >Ass. </th> 
            <th>Voto </th> 	   	 
	        <th >Ass. </th> 
            <th>Voto </th> 	   	 
	        <th >Ass. </th> 
            <th>Voto </th> 	   	 
	        <th >Ass. </th> 
            <th>Voto </th> 	   	 
	        <th >Ass. </th> 
            <th>Voto </th> 	   	 
	        <th >Ass. </th> 
            <th>Voto </th> 	   	 
	        <th >Ass. </th> 
        </tr>
        <tr>
            <td rowspan="2">1</td>
            <td rowspan="2">Verdi</td>
            <td rowspan="2">Giuseppe</td>
        </tr>
        <tr>
            <td>Ott</td>
            <td>0</td>
            <td>6</td>
            <td>0</td>
            <td>6</td>
            <td>0</td>
            <td></td>
            <td>1</td>
            <td>6</td>
            <td>1</td>
            <td>6</td>
            <td>1</td>
            <td>6</td>
            <td>1</td>
            <td>8</td>
            <td>1</td>
            <td>6</td>
            <td>1</td>
            <td>9</td>
            <td>Esito finale</td>
        </tr>
        <tr>
            <td rowspan="2">2</td>
            <td rowspan="2">Rossi</td>
            <td...

CSS

.problem {
    background-color:red
}
.notFilled {
    background-color:yellow;
}
.Condotta4 {
    background-color:lightblue;
}

JavaScript

$(function () {

 /* 
 $("tr>*:empty").parent().addClass("notFilled")
    
   $("tr>*:last-child():contains('Esito finale')").parent().addClass("problem")

    $("tr>*:nth-child(18)").filter(function(){
        return parseInt($(this).text())<5
        console.log(this)
    }).parent().addClass("Condotta4")
    
  
   $("tr>*:nth-child(odd)").filter(function(){ 
       return parseInt($(this).text()) == 0
    }).parent().addClass("problem")
   
   var celle = $("tr>*:nth-child(odd)").parent() 
   
   celle.each(function(){
        var text1 = $(this).text()
           if ($.isNumeric(text1)){
               var n = +text1
               if (n == 0) 
               {
                   $(this).addClass("problem")
               }
           }       
       console.log(n)
   })
  */   
 
   var sospeso =  $("tr>*:last-child():contains('Sospeso')").parent()
   
   sospeso.each(function(){
       var count = 0
       $(this).children(":odd").each(function(){
           //console.log(this)
           var text = $(this).text()
           if ($.isNumeric(text)){
               var num = +text
               if (num < 6) 
               {
                   count++
                   $(this).addClass("problem")
               }
           }
       })
       console.log(count)
   })
  
   
})