0

I am generating a html table through C# code in an MVC Application .
I want to color the value in table cell as red and condition for this is (if column-x value is greater than value of column-y than set color of column-x as red).
column-x and column-y have their on id,s

Below is generated HTML and javascript code which I am using 

$('#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>

Any idea why it is showing no effect ?

Improve this question
2
  • What do you expect if (v1 > v2) to do? Commented Jun 7, 2017 at 11:29
  • color the td content as red , td has id "TodayPDue" Commented Jun 7, 2017 at 11:32

4 Answers 4

Reset to default
2

Preface: you are using the ID in the wrong way. An id must be unique in entire html page.

Solution: this is a solution for your problem, implicitly say that you can have more than one table and more than one row for each table. So:

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

Your body selector was wrong remove # from 

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

it should be 

$('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>

Improve this answer

7 Comments

I think, he wants to be red or green for each td in table.
@oguzhancerit he hardcoded to $('#TodayPDue').css('color','red'); this. so i didn't change that.
@Dinesh I'm not a question owner, I just want to contribute, I vote your answer for useful.
@IshanJain OP has hard coded for his own requirements. i solved his problem for selector issue only.
body is the id of a div tag , not the body tag itself
|
1

You need to convert the text "2220515" to a number 2220515, for instance with parseInt() or with the + operator, as I did.

$('#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>

Improve this answer

1 Comment

This way you can not support multiple row in your table
0

1) Are you really have element with body id on your page. If you meat all tables on the page use ('body table') or just ('table').

2) I think you need classes instead of ids. Id should be unique in document context

3) I don't think you will get correct results here:

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

You trying to compare text not numbers, So 3 is greater then 20 in your case. I think you need parseInt or parseFloat

Improve this answer

Comments