HTML - JavaScript - Spring Changer la couleur de la ligne en fonction de la valeur

J'ai une variable initialisée par Spring Model et en fonction de la valeur d'une colonne, j'ai besoin d'afficher la couleur de fond correspondante.HTML - JavaScript - Spring Changer la couleur de la ligne en fonction de la valeur

J'ai essayé suivant le code JavaScript mais ne fonctionne pas:

<head> 
<script type="text/javascript"> 
<!-- 
    var table = document.getElementById("dataStatusVar");  
    var tbody = table.getElementsByTagName("tbody")[0]; 
    var rows = tbody.getElementsByTagName("tr"); 

    // add event handlers so rows light up and are clickable 
    for (i=0; i < rows.length; i++) { 
     var value = rows[i].getElementsByTagName("td")[0].firstChild.nodeValue; 
     if (value == 'mraible') { 
      rows[i].style.backgroundColor = "red"; 
     } 
    }   
--> 
</head> 
<body> 
    <div> 
    <table id="dataStatusVar"> 
     <tr> 
     <th>TYPE</th> 
     <th>START</th> 
     <th>END</th> 
     </tr> 

     <tr> 
     <td>mraible</td> 
     <td>startvalue</td> 
     <td>endvalue</td> 
     </tr> 
    </table> 
    </div> 
</body>

Je me attends à la ligne à RED. Mais ce n'est pas.

Pouvez-vous me suggérer ce que je fais de mal?

Source

2014-05-06 Sandeep

avez-vous vérifié la console js? essayez d'ajouter un point d'arrêt à cette ligne: if (value == 'mraible') { – Arvind

Je ne suis pas sûr de savoir comment le déboguer. Pouvez-vous s'il vous plaît conseiller? – Sandeep

ne peut pas commenter pour poser des questions dans les réponses, avez-vous essayé d'écrire le code js ci-dessous html? Le JS doit être exécuté après le chargement du code HTML et l'utilisation d'un fichier séparé pour traiter JSTL peut être bizarre de dire le bail, donc la meilleure option est d'exécuter le code js après le HTML et JSTL.

Source

2014-05-06 06:35:43 prateekc

Si vous avez la possibilité de choisir le jstl est le code suivant

<c:forEach items="${rows}" var="usr" varStatus="st"> 
    <c:choose> 
     <c:when test="${st.index%2 eq 0}"> 
     <c:set var="tr" value="red"></c:set> 
     </c:when> 
     <c:otherwise> 
     <c:set var="tr" value="blue"></c:set> 
     </c:otherwise> 
    </c:choose> 
    <div> 
    <table id="dataStatusVar"> 
     <tr> 
     <th>TYPE</th> 
     <th>START</th> 
     <th>END</th> 
     </tr> 
     <tr bgcolor="{tr}"> 
     <td>mraible</td> 
     <td>startvalue</td> 
     <td>endvalue</td> 
     </tr> 
    </table> 
    </div> 
</c:forEach>

Source

2014-05-06 07:01:55 Swathi

Swathi - Cela ne fonctionne pas. J'ai essayé le code mais il vient juste de NOIR. Aussi, j'ai besoin de modifier la couleur en fonction de la valeur. – Sandeep

vous pouvez ici essayer:

<body> 
    <div> 
    <table id="dataStatusVar"> 
     <tr> 
     <th>TYPE</th> 
     <th>START</th> 
     <th>END</th> 
     </tr> 

     <tr> 
     <td>mraible</td> 
     <td>startvalue</td> 
     <td>endvalue</td> 
     </tr> 
    </table> 
    </div> 
</body> 

<script> 
    var table = document.getElementById("dataStatusVar");  
var tbody = table.getElementsByTagName("tbody")[0]; 
var rows = tbody.getElementsByTagName("tr"); 

// add event handlers so rows light up and are clickable 
for (i=0; i < rows.length; i++) { 
    var tds = rows[i].getElementsByTagName("td"); 
    if (tds.length) { 
     var value = tds[0].innerHTML; 
     if (value == 'mraible') { 
      rows[i].style.background = "red"; // for entire row 
      //tds[0].style.background = "red"; // for a cell 
     } 
    } 
}   
</script>

Source

2014-05-09 04:40:34 Arvind

lien vers [violon] (http://jsfiddle.net/83VAs/1/) – Arvind

Si une fonction/déclarations dépendent de l'élément DOM (s), alors des mesures doivent être prises pour que pendant l'exécution de cette fonction/élément (s) déclaration doit être disponible (chargé) pour le traitement. Alors, je l'ai appelé fonction setColour() une fois que les éléments sont chargés (dans le corps)

<html> 
<head> 
<script type="text/javascript"> 
    function setColour() 
    { 
     var table = document.getElementById("dataStatusVar"); //Gets the required table 
     var tbody = table.getElementsByTagName("tbody")[0]; 
     var rows = tbody.getElementsByTagName("tr"); //Gets the trs from the table 

     for (i=0; i < rows.length; i++) {//For each row in the table 
      var tdelements = rows[i].getElementsByTagName("td")[0]; //First cell in the selected row 
      if (tdelements != null) { //If first cell exists 
       var value = tdelements.innerHTML; //Fetch the content of the first cell in the selected row 
       if (value === 'mraible') { //Checks if the cell has expected value 
        rows[i].style.background = "red"; // Sets red color for the entire row 
       } 
      } 
     }   
    } 
</script> 
</head> 
<body onload="setColour()"> 
    <div> 
    <table id="dataStatusVar"> 
     <tr> 
     <th>TYPE</th> 
     <th>START</th> 
     <th>END</th> 
     </tr> 
     <tr> 
     <td>mraible</td> 
     <td>startvalue</td> 
     <td>endvalue</td> 
     </tr> 
     <tr>  
     </tr> 
    </table> 
    </div> 
</body> 
</html>

De votre échantillon, j'ai supposé que la couleur doit être fixée pour toute la ligne si le contenu de la première colonne dans la rangée correspond à une valeur particulière.

Source

2016-01-08 09:24:52

HTML - JavaScript - Spring Changer la couleur de la ligne en fonction de la valeur

Répondre

Questions connexes