Setting Color through Javascript based on condition

Question

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 ?

What do you expect if (v1 > v2) to do?

evolutionxbox
– evolutionxbox

2017-06-07 11:29:44 +00:00
Commented Jun 7, 2017 at 11:29 — evolutionxbox
– evolutionxbox, Commented Jun 7, 2017 at 11:29
color the td content as red , td has id "TodayPDue"

user7951164
– user7951164

2017-06-07 11:32:43 +00:00
Commented Jun 7, 2017 at 11:32 — user7951164
– user7951164, Commented Jun 7, 2017 at 11:32

Matteo Gaggiano · Accepted Answer · 2017-06-07 11:49:12Z

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>

Ishan Jain · Accepted Answer · 2017-06-07 11:55:12Z

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>

edited Jun 7, 2017 at 11:55

Ishan Jain

8,23111 gold badges52 silver badges77 bronze badges

answered Jun 7, 2017 at 11:33

Dinesh undefined

5,5262 gold badges22 silver badges41 bronze badges

7 Comments

oguzhancerit Over a year ago

I think, he wants to be red or green for each td in table.

Dinesh undefined Over a year ago

@oguzhancerit he hardcoded to $('#TodayPDue').css('color','red'); this. so i didn't change that.

oguzhancerit Over a year ago

@Dinesh I'm not a question owner, I just want to contribute, I vote your answer for useful.

Dinesh undefined Over a year ago

@IshanJain OP has hard coded for his own requirements. i solved his problem for selector issue only.

user7951164 Over a year ago

body is the id of a div tag , not the body tag itself

|

Jeremy Thille · Accepted Answer · 2017-06-07 11:37:53Z

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>

answered Jun 7, 2017 at 11:37

Jeremy Thille

26.4k12 gold badges48 silver badges64 bronze badges

1 Comment

Matteo Gaggiano Over a year ago

This way you can not support multiple row in your table

Alex Lyalka · Accepted Answer · 2017-06-07 11:42:20Z

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

answered Jun 7, 2017 at 11:42

Alex Lyalka

1,81112 silver badges14 bronze badges

Collectives™ on Stack Overflow

Setting Color through Javascript based on condition

4 Answers 4

Comments

7 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related