2列目の各セルと最後の行の対応セルとを比較した条件付き書式

Webページで条件付き書式を適用して3つの書式設定規則を割り当てるようにしました（CSSクラス 'good'、 'bad' 、 '満足のいく'）、表の第2列のセルと表の最後の行に対応するセルとを比較することによって、2列目の各セルと最後の行の対応セルとを比較した条件付き書式

は、画像内の細胞間の比較の詳細を参照してください細胞場合 rule to compare cells in table

in words:

は（2,2）セル（9,3）とセル（2,2）比較しますセル（9,3）の背景をセル（9,3）の緑色（class = 'good'）に変更し、IFセル（2,2）>セル（9,3）セル（2,2）とセル（9,3）を比較する。
セル（3,2）をセル（9,4）と比較する
は

とセル（8,2）を比較（9,5）セルとセル（4,2）を比較します動作していない：

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') 
        } 
}

それは理にかなっている場合は、HTMLページ内のテーブルの定義を「GridView1は」

<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>

されたHTMLテーブルはASP GridVから出てきますコントロールの表示

<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>

私が説明したこの条件付き書式を達成するのを手伝ってください。

出典

2016-04-06 peppe1

どういう意味ですか？

例のようにforをi = 3とする必要がありますか？

あなたは簡単にデバッグを行うために

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

のようなグリッド変数を宣言しない理由？おそらくあなたのセレクタが悪いです

、'#id'はjQueryを使って良いですが、document.getElementByIdのが唯一の私は今あなたがやっている他の過ちを参照してください

パラメータとして'id'たい：

あなたは2つのHTML要素を比較しています、 HTML要素のclassListプロパティを使用しているクラスを変更する

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'); 
}

と、良い方法

：代わりにこれを行います

出典

2016-04-06 07:20:35

私はJavascriptに新しいです。私はページのの領域内の機能で引用されたコードを置きます。私は何か別のことをする必要がありますか？ htmlページのの中の関数を呼び出す必要がありますか？ – peppe1

私はまだ – peppe1

は、私はあなたの最後の変化に応じて編集した後、ファビオが。それはまだ動作していない私を助けてくれてありがとう動作しません、テーブルのIDである「GridView1" にIDを変更しました。私はでテーブル定義を入力します質問、それは場合に役立ちます私は代わりのinnerTextの複数のバリエーションを試してみました、.VALUEと同じコードをしました;。のparseInt（...テキスト（））と、それが動作しないのいずれか – 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>

あなたは私はテーブルのためにいくつかのデモデータを使用しているpeppe1 @？これが必要です。

出典

2016-04-06 09:17:27 Batman

はバットマン – peppe1

がそれで、あなたに感謝しますワーキング？ – Batman

あなたがそれを投稿する前に、私は別の適切な解決策を見つけました。あなたの解決策はまだ試していませんでしたが、私はこれを行い、あなたに知らせます。 – peppe1

最後に、私はこのための解決策を発見しました。助けてくれてありがとう、ファビオ。

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

分解能の完全なコードはここにある：

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'); } 
      } 
     }

出典

2016-04-06 09:19:27 peppe1

2列目の各セルと最後の行の対応セルとを比較した条件付き書式

答えて

関連する問題