jQueryを使用して個々のセルをスタイリングする際に問題が発生する可能性があります。

Question

vb.netのグリッドビューによって作成された表のスタイリングには、何か助けが必要です。

テーブルのテキストに基づいてセルをスタイルするjQueryを作成しています。

細胞は、現在、私は、ストアドプロシージャを完了した後、テーブルのすべての数字は、私が戻ってjQueryのから任意のスタイルを取得していない午前90および100

の間になり、乱数を移入するデータベースによって移入されています。

最初の列は数字ではありませんので、スタイリングは必要ありません。私は助けに感謝します。

<table class="table table-bordered" cellspacing="0" rules="all" border="1" id="ctl00_ContentPlaceHolder1_GridView1" style="border-collapse:collapse;"> 
     <tr> 
      <th scope="col">&nbsp;</th><th scope="col">Monday</th><th scope="col">Tuesday</th><th scope="col">Wednesday</th><th scope="col">Thursday</th><th scope="col">Friday</th><th scope="col">Week To Date</th><th scope="col">Month To Date</th><th scope="col">Month Rework Success Rate</th> 
     </tr><tr> 
      <td style="font-weight:bold;">Dyeing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
     </tr><tr> 
      <td style="font-weight:bold;">Preparation</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
     </tr><tr> 
      <td style="font-weight:bold;">Framing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
     </tr><tr> 
      <td style="font-weight:bold;">Inspection &amp; Packing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
     </tr><tr> 
      <td style="font-weight:bold;">Face Finishing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
     </tr><tr> 
      <td style="font-weight:bold;">Quality Control</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
     </tr><tr> 
      <td style="font-weight:bold;">Knitting</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
     </tr><tr> 
      <td style="font-weight:bold;">Planning</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
     </tr><tr> 
      <td style="font-weight:bold;">Warping</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
     </tr><tr> 
      <td style="font-weight:bold;">Laminate</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
     </tr> 
    </table> 


<script> 
     $(document).ready(function() { 
      $("table tr td").find("td").each(function() { 
       if ($(this).text() > "97") { 
        $(this).css("background-color", "Green"); 
       } 

       if ($(this).text() <= "94" || (this).text() >= "97") { 
        $(this).css("background-color", "Blue"); 
       } 

       if ($(this).text() < "94") { 
        $(this).css("background-color", "green"); 
       } 
      }); 
     }); 
    </script> 

Answer 1

。

 $(document).ready(function() { 
 
      $("table tr").find("td").each(function() { 
 
       if (Number($(this).text()) > 45) { 
 
       //value is bigger than 45 
 
        $(this).css("background-color", "Yellow"); 
 
       } 
 

 
       if (Number($(this).text()) >= 20 && Number($(this).text()) <= 45) { 
 
       //value is beetween 20 and 45 include 
 
        $(this).css("background-color", "Blue"); 
 
       } 
 

 
       if (Number($(this).text()) < 20) { 
 
        //value is less than 20 
 
        $(this).css("background-color", "red"); 
 
       } 
 
      }); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-bordered" cellspacing="0" rules="all" border="1" id="ctl00_ContentPlaceHolder1_GridView1" style="border-collapse:collapse;"> 
 
     <tr> 
 
      <th scope="col">&nbsp;</th><th scope="col">Monday</th><th scope="col">Tuesday</th><th scope="col">Wednesday</th><th scope="col">Thursday</th><th scope="col">Friday</th><th scope="col">Week To Date</th><th scope="col">Month To Date</th><th scope="col">Month Rework Success Rate</th> 
 
     </tr><tr> 
 
      <td style="font-weight:bold;">Dyeing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
 
     </tr><tr> 
 
      <td style="font-weight:bold;">Preparation</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
 
     </tr><tr> 
 
      <td style="font-weight:bold;">Framing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
 
     </tr><tr> 
 
      <td style="font-weight:bold;">Inspection &amp; Packing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
 
     </tr><tr> 
 
      <td style="font-weight:bold;">Face Finishing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
 
     </tr><tr> 
 
      <td style="font-weight:bold;">Quality Control</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
 
     </tr><tr> 
 
      <td style="font-weight:bold;">Knitting</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
 
     </tr><tr> 
 
      <td style="font-weight:bold;">Planning</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
 
     </tr><tr> 
 
      <td style="font-weight:bold;">Warping</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
 
     </tr><tr> 
 
      <td style="font-weight:bold;">Laminate</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
 
     </tr> 
 
    </table>

彼らは自分自身を上書きして、テスト中に注意してください。

Answer 2

セルの内容を数字で比較するには、まずparseInt()が必要です。

このコードは動作します：私は与えられたテーブル（yurケースに収まるように再度変更）に対応する値を持つようにテスト値を変更

$(document).ready(function() { 
    $("table tr td").each(function() { 
     if (parseInt($(this).text()) > 97) { 
      $(this).css("background-color", "Green"); 
     } 

     if (parseInt($(this).text()) <= 94 || (this).html().parseInt() >= 97) { 
      $(this).css("background-color", "Blue"); 
     } 

     if (parseInt($(this).text()) < 93) { 
      $(this).css("background-color", "green"); 
     } 
    }); 
}); 

Answer 3

$(document).ready(function() { 
 
    var obj = $("table tr td"); 
 
    
 
    obj.each(function() { 
 
    if(parseFloat($(this).text())){ 
 
     
 
    
 
     if (parseFloat($(this).text()) < 30) { 
 
     $(this).css("background-color", "red"); 
 
     }else if (parseFloat($(this).text()) >= 30 && parseFloat($(this).text()) <= 60) { 
 
     $(this).css("background-color", "green"); 
 
     }else{ 
 
     $(this).css("background-color", "blue"); 
 
     } 
 
    } 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-git.js"></script> 
 
<table class="table table-bordered" cellspacing="0" rules="all" border="1" id="ctl00_ContentPlaceHolder1_GridView1" style="border-collapse:collapse;"> 
 
     <tr> 
 
      <th scope="col">&nbsp;</th><th scope="col">Monday</th><th scope="col">Tuesday</th><th scope="col">Wednesday</th><th scope="col">Thursday</th><th scope="col">Friday</th><th scope="col">Week To Date</th><th scope="col">Month To Date</th><th scope="col">Month Rework Success Rate</th> 
 
     </tr><tr> 
 
      <td style="font-weight:bold;">Dyeing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
 
     </tr><tr> 
 
      <td style="font-weight:bold;">Preparation</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
 
     </tr><tr> 
 
      <td style="font-weight:bold;">Framing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
 
     </tr><tr> 
 
      <td style="font-weight:bold;">Inspection &amp; Packing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
 
     </tr><tr> 
 
      <td style="font-weight:bold;">Face Finishing</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
 
     </tr><tr> 
 
      <td style="font-weight:bold;">Quality Control</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
 
     </tr><tr> 
 
      <td style="font-weight:bold;">Knitting</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
 
     </tr><tr> 
 
      <td style="font-weight:bold;">Planning</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
 
     </tr><tr> 
 
      <td style="font-weight:bold;">Warping</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
 
     </tr><tr> 
 
      <td style="font-weight:bold;">Laminate</td><td>49.00</td><td>15.00</td><td>10.00</td><td>47.00</td><td>18.00</td><td>21.00</td><td>0.34</td><td>41.00</td> 
 
     </tr> 
 
</table>