Bedingte Formatierung durch Vergleichen jeder Zelle in der zweiten Spalte mit der entsprechenden Zelle in der letzten Zeile

Ich möchte eine bedingte Formatierung in einer Webseite anwenden, um drei Formatierungsregeln zuzuweisen (implementiert über CSS-Klassen 'gut', 'schlecht' , 'befriedigend') durch Vergleichen der Zellen aus der zweiten Spalte in einer Tabelle mit Zellen in der letzten Zeile der Tabelle.Bedingte Formatierung durch Vergleichen jeder Zelle in der zweiten Spalte mit der entsprechenden Zelle in der letzten Zeile

siehe die Einzelheiten des Vergleichs zwischen den Zellen in dem Bild: rule to compare cells in table

in words:

vergleichen Zelle (2,2) mit Zelle (9,3), wenn Zelle (2,2) < = Zelle (9,3) Hintergrund der Zelle (9,3) in grün ändern (Klasse = 'gut'), IF Zelle (2,2)> Zelle (9,3) Hintergrund der Zelle ändern (9,3) zu rot (Klasse = 'schlecht') Zelle (2,2) mit Zelle (9,3) vergleichen
Zelle (3,2) mit Zelle (9,4) vergleichen
vergleichen Zelle (4,2) mit Zelle (9,5) ..until
vergleichen Zelle (8,2) mit Zelle (9,9)

habe ich versucht, dieses Javascript und es ist nicht funktioniert:

function realizat() { 
       for (i = 2; i < 9; i++) { 
        if (document.getElementById('GridView1').rows[i].cells[2] < document.getElementById('GridView1').rows[9].cells[i + 1]) { 
         document.getElementById('GridView1').rows[9].cells[i + 1].addClass = ('bad') 
        } 
}

ob es Sinn macht, ist die Definition der Tabelle "GridView1" in der hTML-Seite

<table class="containerComisionare" cellspacing="0" cellpadding="1" id="GridView1" style="width:400px;border-collapse:collapse;"> 
    <tr style="color:Black;background-color:White;border-style:None;font-family:Segoe UI;font-size:8pt;font-weight:normal;"> 
     <th scope="col">Ziua Planificare</th><th scope="col">Target (Soll)</th><th scope="col">Realizat (Ist) Vineri</th><th scope="col">Realizat (Ist) Sambata</th><th scope="col">Realizat (Ist) Duminica</th><th scope="col">Realizat (Ist) Luni</th><th scope="col">Realizat (Ist) Marti</th><th scope="col">Realizat (Ist) Miercuri</th><th scope="col">Realizat (Ist) Joi</th><th scope="col">Realizat (Ist) Total</th> 
    </tr><tr align="center" style="border-width:1px;border-style:Solid;font-family:Segoe UI;font-size:8pt;"> 
     <td>Vineri</td><td>134</td><td>134</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>134</td> 
    </tr><tr align="center" style="background-color:White;border-width:1px;border-style:Solid;font-family:Segoe UI;font-size:8pt;"> 
     <td>Sambata</td><td>55</td><td>60</td><td>55</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>115</td> 
    </tr><tr align="center" style="border-width:1px;border-style:Solid;font-family:Segoe UI;font-size:8pt;"> 
     <td>Duminica</td><td>45</td><td>&nbsp;</td><td>&nbsp;</td><td>39</td><td>4</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>43</td> 
    </tr><tr align="center" style="background-color:White;border-width:1px;border-style:Solid;font-family:Segoe UI;font-size:8pt;"> 
     <td>Luni</td><td>32</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>32</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>32</td> 
    </tr><tr align="center" style="border-width:1px;border-style:Solid;font-family:Segoe UI;font-size:8pt;"> 
     <td>Marti</td><td>7</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>7</td><td>&nbsp;</td><td>&nbsp;</td><td>7</td> 
    </tr><tr align="center" style="background-color:White;border-width:1px;border-style:Solid;font-family:Segoe UI;font-size:8pt;"> 
     <td>Miercuri</td><td>4</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>4</td><td>&nbsp;</td><td>4</td> 
    </tr><tr align="center" style="border-width:1px;border-style:Solid;font-family:Segoe UI;font-size:8pt;"> 
     <td>Joi</td><td>5</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>5</td><td>5</td> 
    </tr><tr align="center" style="background-color:White;border-width:1px;border-style:Solid;font-family:Segoe UI;font-size:8pt;"> 
     <td>Total</td><td>&nbsp;</td><td>194</td><td>55</td><td>39</td><td>36</td><td>7</td><td>4</td><td>5</td><td>&nbsp;</td> 
    </tr> 
</table>

die hTML-Tabelle aus einem ASP-GridV kommt iew Control

<asp:GridView ID="GridView1" runat="server" ClientIDMode="Static" CellPadding="1" GridLines="None" Width="400px" CssClass="containerComisionare"> 
     <AlternatingRowStyle BackColor="white"/> 
     <HeaderStyle BackColor="White" Font-Names="Segoe UI" Font-Size="8pt" ForeColor="Black" Font-Bold="False" BorderStyle="None" /> 
     <RowStyle Font-Names="Segoe UI" Font-Size="8pt" HorizontalAlign="Center" BorderStyle="Solid" BorderWidth="1px"/> 
    </asp:GridView>

Bitte helfen Sie mir, diese bedingte Formatierung zu erreichen, die ich beschrieben habe.

Quelle

2016-04-06 peppe1

was meinst du mit nicht funktioniert?

wollen Sie die for mit i = 3 wie in Ihrem Beispiel beginnen müssen?

warum Sie kein Raster Variable wie

var grid = document.getElementById('GridView1');

zu erleichtern Debuggen erklären?

wahrscheinlich die Wähler schlecht ist, '#id' mit jQuery ist gut, nur document.getElementById 'id' als Parameter

will ich jetzt andere Fehler sehen Sie tun:

Sie vergleichen 2 HTML-Elemente, statt dies tun:

var grid = document.getElementById('GridView1'); 
if (grid.rows[i].cells[2].innerText < grid.rows[9].cells[i + 1].innerText) { 
    gridrows[9].cells[i + 1].classList.add('bad'); 
}

und eine gute Methode, um eine Klasse zu ändern verwenden classList Eigenschaft von hTML-Elementen

Quelle

2016-04-06 07:20:35

ich Javascript neu bin. Ich habe den Code, den ich zitiert habe, in eine Funktion innerhalb der Region der der Seite. Muss ich etwas anderes machen? Sollte ich die Funktion innerhalb der der HTML-Seite aufrufen? – peppe1

Ich habe die ID in "GridView1" geändert, was die ID der Tabelle ist, funktioniert immer noch nicht – peppe1

Danke, dass du mir geholfen hast, Fabio. Es funktioniert immer noch nicht, nachdem ich deine letzten Änderungen bearbeitet habe. Ich habe die Tabellendefinition eingegeben Die Frage, wenn es hilft.Ich habe mehrere Varianten anstelle von innerText versucht, habe den gleichen Code mit .value; parseInt (... text()) und es funktioniert auch nicht – peppe1

function x() { 
 
    var tab = document.getElementById('GridView1'); 
 
    console.log("hi ", document.getElementById('GridView1')); 
 
    var row = tab.getElementsByTagName('tr'); 
 
    for (i = 1; i < 8; i++) { 
 
     console.log("hllo ", Number(row[i].getElementsByTagName('td')[1].innerHTML)); 
 
     console.log("hllo1 ", Number(row[8].getElementsByTagName('td')[i + 1].innerHTML)); 
 

 
     if (Number(row[i].getElementsByTagName('td')[1].innerHTML) <= Number(row[8].getElementsByTagName('td')[i + 1].innerHTML)) { 
 
      console.log("djfgjg ", row[i].getElementsByTagName('td')[9]); 
 
      row[i].getElementsByTagName('td')[9].style.backgroundColor = "green"; 
 
     } else { 
 
      row[i].getElementsByTagName('td')[9].style.backgroundColor = "red"; 
 
     } 
 

 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>stack</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 

 

 

 
<body onload="x()"> 
 
    <table id="GridView1"> 
 
     <tr> 
 
      <th>a</th> 
 
      <th>b</th> 
 
      <th>c</th> 
 
      <th>d</th> 
 
      <th>e</th> 
 
      <th>f</th> 
 
      <th>g</th> 
 
      <th>h</th> 
 
      <th>i</th> 
 
      <th>j</th> 
 
     </tr> 
 
     <tr> 
 
      <td>A</td> 
 
      <td>134</td> 
 
      <td>134</td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td>134</td> 
 
     </tr> 
 
     <tr> 
 
      <td>B</td> 
 
      <td>55</td> 
 
      <td>60</td> 
 
      <td>65</td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td>115</td> 
 
     </tr> 
 
     <tr> 
 
      <td>C</td> 
 
      <td>45</td> 
 
      <td></td> 
 
      <td></td> 
 
      <td>39</td> 
 
      <td>4</td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td>43</td> 
 
     </tr> 
 
     <tr> 
 
      <td>D</td> 
 
      <td>32</td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td>32</td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td>32</td> 
 
     </tr> 
 
     <tr> 
 
      <td>E</td> 
 
      <td>7</td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td>7</td> 
 
      <td></td> 
 
      <td></td> 
 
      <td>7</td> 
 
     </tr> 
 
     <tr> 
 
      <td>F</td> 
 
      <td>4</td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td>4</td> 
 
      <td></td> 
 
      <td>4</td> 
 
     </tr> 
 
     <tr> 
 
      <td>G</td> 
 
      <td>5</td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td>5</td> 
 
      <td>5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>H</td> 
 
      <td></td> 
 
      <td>194</td> 
 
      <td>55</td> 
 
      <td>39</td> 
 
      <td>36</td> 
 
      <td>7</td> 
 
      <td>4</td> 
 
      <td>5</td> 
 
     </tr> 
 
    </table> 
 
    <script type="text/javascript" src="controller.js"></script> 
 
</body> 
 

 
</html>

tun Sie dies benötigen? @ Peppe1 i für die Tabelle ein paar Demo-Daten verwendet haben.

Quelle

2016-04-06 09:17:27 Batman

danke, Batman – peppe1

ist es Arbeiten ? – Batman

bevor Sie es gepostet haben, hatte ich eine andere anwendbare Lösung gefunden. Ich habe deine Lösung noch nicht versucht, aber ich werde das tun und ich werde es dich wissen lassen. – peppe1

Endlich habe ich die Lösung dafür gefunden. Vielen Dank für die Hilfe, Fabio.

the issue was due to the fact that Javascript counts the rows and columns starting with 0 (=first row or column of tables). My loop was pointing to the non-existent row, namely row number 9

der vollständige Code mit der Auflösung ist hier:

function realizat() { 
      alert("Hello, hereby I verify that I am executed"); 
      for (i = 1; i < 9; i++) { 
       var grid = document.getElementById('GridView1'); 
       if (grid.rows[i].cells[1].innerText < grid.rows[8].cells[i + 1].innerText) { 
        grid.rows[8].cells[i + 1].classList.add('good'); 
       } else { grid.rows[8].cells[i + 1].classList.add('bad'); } 
      } 
     }

Quelle

2016-04-06 09:19:27 peppe1

Bedingte Formatierung durch Vergleichen jeder Zelle in der zweiten Spalte mit der entsprechenden Zelle in der letzten Zeile

Antwort

Verwandte Themen