条件に基づいてJavascriptで色を設定します

Question

私はMVCアプリケーションのC＃コードでhtmlテーブルを生成しています。
表のセルの値を赤で色付けしたいのですが、これは（column-xの値がcolumn-xの値より大きく、column-xの色をredとして設定した場合）です。
列-xとカラムyが自分のIDに、無

以下

はHTML、それが表示されている理由は、私が

$('#body table').each(function() { 
 
    $('#' + this.id + ' ' + 'tr').each(function() { 
 
     var v1 = $('#TodayPDue').html(); 
 
     var v2 = $('#TodayIntDue').html(); 
 
    
 
     if (v1 > v2){ 
 
      $('#TodayPDue').css('color','red'); 
 
     }   
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id='CollectionRPT' class='table table-bordered table-hover'> 
 
    <tbody> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>BIHAR</td> 
 
      <td id='TodayPDue'>2220515</td> 
 
      <td id='TodayIntDue'>457565</td> 
 
      <td id='TodayPCollected'>0</td> 
 
      <td id='TodayIntCollected'>0</td> 
 
      <td id='MonthPDue'>10232468</td> 
 
      <td id='MonthIntDue'>2058526</td> 
 
      <td id='MonthPCollected'>5912869</td> 
 
      <td id='MonthIntCollected'>1167760</td> 
 
      <td id='YearPDue'>6432342</td> 
 
      <td id='YearIntDue'>1303773</td> 
 
      <td id='YearPCollected'>2111473</td> 
 
      <td id='YearIntCollected'>413023</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

任意のアイデアを使用していますJavaScriptコードを生成しているよ持っています効果？

Answer 1

でなければなりません

$('#body table').each(function() { 

から間違って削除＃でした012の場合または+演算子を使用していました。

$('#CollectionRPT td').each(function() { 
 
    var v1 = +$('#TodayPDue').html(); 
 
    var v2 = +$('#TodayIntDue').html(); 
 
    
 
    if (v1 > v2){ 
 
     $('#TodayPDue').css('color','red'); 
 
    }   
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id='CollectionRPT' class='table table-bordered table-hover'> 
 
    <tbody> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>BIHAR</td> 
 
      <td id='TodayPDue'>2220515</td> 
 
      <td id='TodayIntDue'>457565</td> 
 
      <td id='TodayPCollected'>0</td> 
 
      <td id='TodayIntCollected'>0</td> 
 
      <td id='MonthPDue'>10232468</td> 
 
      <td id='MonthIntDue'>2058526</td> 
 
      <td id='MonthPCollected'>5912869</td> 
 
      <td id='MonthIntCollected'>1167760</td> 
 
      <td id='YearPDue'>6432342</td> 
 
      <td id='YearIntDue'>1303773</td> 
 
      <td id='YearPCollected'>2111473</td> 
 
      <td id='YearIntCollected'>413023</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 2

あなたの体のセレクタは、それはあなたが数2220515にテキスト"2220515"を変換する必要が

$('body table').each(function() { 

function color_table() { 
 
    $('body table').each(function() {  
 
     $('#' + this.id + ' ' + 'tr').each(function() {     
 
      var v1 = $(this).find('#TodayPDue').html(); 
 
      var v2 = $(this).find('#TodayIntDue').html(); 
 
      
 
      if (v1 > v2) 
 
      { 
 
       $('#TodayPDue').css('color','red'); 
 
      } 
 
      else 
 
      { 
 
       $('#TodayPDue').css('color','green'); 
 
      } 
 
     }); 
 
    }); 
 
} 
 

 
color_table();

table 
 
{ 
 
    border:1 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id='CollectionRPT' class='table table-bordered table-hover'> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td><td>BIHAR</td><td id='TodayPDue'>2220515</td><td id='TodayIntDue'>457565</td> 
 
     <td id='TodayPCollected'>0</td><td id='TodayIntCollected'>0</td><td id='MonthPDue'>10232468</td> 
 
     <td id='MonthIntDue'>2058526</td><td id='MonthPCollected'>5912869</td><td id='MonthIntCollected'>1167760</td> 
 
     <td id='YearPDue'>6432342</td><td id='YearIntDue'>1303773</td><td id='YearPCollected'>2111473</td> 
 
     <td id='YearIntCollected'>413023</td> 
 
     </tr> 
 
     </tbody> 
 
    </table>

Answer 3

1）は、あなたが本当にあなたのページのボディidを持つ要素を持っています。あなたが肉を食べれば、ページ上の全てのテーブルが（ボディテーブル）または単に（テーブル）使用されます。

2）idsの代わりにクラスが必要だと思います。

3）私はあなたがここで正しい結果を得るとは思わないIdは、文書のコンテキスト内で一意でなければなりません：あなたは、テキストではない数字を比較しようとしている

var v1 = $('#TodayPDue').html(); 
var v2 = $('#TodayIntDue').html(); 
if (v1 > v2) 

、SO 3は、あなたのケースでは20より大きいです。 あなたはparseIntまたはparseFloatが必要だと思います。

Answer 4

はじめに：間違った方法でIDを使用しています。 idはHTMLページ全体で一意でなければなりません。

解決策：これは問題の解決方法です。暗黙のうちに、各テーブルに複数のテーブルと複数の行を含めることができます。だから、：

$(document).ready(function() { 
 

 
    $('body table').each(function(index, table) { 
 
    $table = $(table); 
 
    $table.find('tr').each(function(rowIndex, row) { 
 
     $row = $(row); 
 
     var v1 = parseInt($row.find('#TodayPDue').html()); 
 
     var v2 = parseInt($row.find('#TodayIntDue').html()); 
 

 
     if (v1 > v2) { 
 
     $row.find('#TodayPDue').css('color', 'red'); 
 
     } else { 
 
     $row.find('#TodayPDue').css('color', 'green'); 
 
     } 
 
    }); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id='CollectionRPT' class='table table-bordered table-hover'> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>BIHAR</td> 
 
     <td id='TodayPDue'>2220515</td> 
 
     <td id='TodayIntDue'>4457565</td> 
 
     <td id='TodayPCollected'>0</td> 
 
     <td id='TodayIntCollected'>0</td> 
 
     <td id='MonthPDue'>10232468</td> 
 
     <td id='MonthIntDue'>2058526</td> 
 
     <td id='MonthPCollected'>5912869</td> 
 
     <td id='MonthIntCollected'>1167760</td> 
 
     <td id='YearPDue'>6432342</td> 
 
     <td id='YearIntDue'>1303773</td> 
 
     <td id='YearPCollected'>2111473</td> 
 
     <td id='YearIntCollected'>413023</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>BIHAR</td> 
 
     <td id='TodayPDue'>2220515</td> 
 
     <td id='TodayIntDue'>2220515</td> 
 
     <td id='TodayPCollected'>0</td> 
 
     <td id='TodayIntCollected'>0</td> 
 
     <td id='MonthPDue'>10232468</td> 
 
     <td id='MonthIntDue'>2058526</td> 
 
     <td id='MonthPCollected'>5912869</td> 
 
     <td id='MonthIntCollected'>1167760</td> 
 
     <td id='YearPDue'>6432342</td> 
 
     <td id='YearIntDue'>1303773</td> 
 
     <td id='YearPCollected'>2111473</td> 
 
     <td id='YearIntCollected'>413023</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>BIHAR</td> 
 
     <td id='TodayPDue'>2220515</td> 
 
     <td id='TodayIntDue'>457565</td> 
 
     <td id='TodayPCollected'>0</td> 
 
     <td id='TodayIntCollected'>0</td> 
 
     <td id='MonthPDue'>10232468</td> 
 
     <td id='MonthIntDue'>2058526</td> 
 
     <td id='MonthPCollected'>5912869</td> 
 
     <td id='MonthIntCollected'>1167760</td> 
 
     <td id='YearPDue'>6432342</td> 
 
     <td id='YearIntDue'>1303773</td> 
 
     <td id='YearPCollected'>2111473</td> 
 
     <td id='YearIntCollected'>413023</td> 
 
    </tr> 
 
    <tr> 
 
     <td>4</td> 
 
     <td>BIHAR</td> 
 
     <td id='TodayPDue'>2220515</td> 
 
     <td id='TodayIntDue'>2220513</td> 
 
     <td id='TodayPCollected'>0</td> 
 
     <td id='TodayIntCollected'>0</td> 
 
     <td id='MonthPDue'>10232468</td> 
 
     <td id='MonthIntDue'>2058526</td> 
 
     <td id='MonthPCollected'>5912869</td> 
 
     <td id='MonthIntCollected'>1167760</td> 
 
     <td id='YearPDue'>6432342</td> 
 
     <td id='YearIntDue'>1303773</td> 
 
     <td id='YearPCollected'>2111473</td> 
 
     <td id='YearIntCollected'>413023</td> 
 
    </tr> 
 
    <tr> 
 
     <td>5</td> 
 
     <td>BIHAR</td> 
 
     <td id='TodayPDue'>2220515</td> 
 
     <td id='TodayIntDue'>2220514</td> 
 
     <td id='TodayPCollected'>0</td> 
 
     <td id='TodayIntCollected'>0</td> 
 
     <td id='MonthPDue'>10232468</td> 
 
     <td id='MonthIntDue'>2058526</td> 
 
     <td id='MonthPCollected'>5912869</td> 
 
     <td id='MonthIntCollected'>1167760</td> 
 
     <td id='YearPDue'>6432342</td> 
 
     <td id='YearIntDue'>1303773</td> 
 
     <td id='YearPCollected'>2111473</td> 
 
     <td id='YearIntCollected'>413023</td> 
 
    </tr> 
 
    </tbody> 
 
</table>