How to set default color based on a column condition

Question

<table cellspacing="2" cellpadding="2" align="Center" border="0" id="ctl00_centerContent_GridView1" style="border-color:Gray;border-width:1px;border-style:solid;">
    <tbody>
        <tr style="background-color:SeaShell;">
            <td class="nonpar" style="color:Red;font-weight:bold;"><a href="javascript:void(0);" style="color: black; cursor: default;">Entry #1</a></td>
            <td align="center" style="color:Red;">&nbsp;</td>
            <td align="center">N</td>
            <td>&nbsp;</td>
        </tr>
        <tr style="background-color:SeaShell;">
            <td class="nonpar" style="color:Red;font-weight:bold;"><a href="javascript:void(0);" style="color: black; cursor: default;">Entry #2</a></td>
            <td align="center" style="color:Red;">&nbsp;</td>
            <td align="center">N</td>
            <td>&nbsp;</td>
        </tr>
        <tr style="background-color:SeaShell;">
            <td class="nonpar" style="color:Red;font-weight:bold;"><a href="javascript:void(0);" style="color: black; cursor: default;">Entry #3</a></td>
            <td align="center" style="color:Red;">&nbsp;</td>
            <td align="center">Y</td>
            <td>&nbsp;</td>
        </tr>
        <tr style="background-color:SeaShell;">
            <td class="nonpar" style="color:Red;font-weight:bold;"><a href="javascript:void(0);" style="color: black; cursor: default;">Entry #4</a></td>
            <td align="center" style="color:Red;">&nbsp;</td>
            <td align="center">Y</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

I am setting the Url, the color, and the cursor through a JQuery:

$("#ctl00_centerContent_GridView1 tr td a").each(function () {
    var url = $(this).attr("href");
    var cid = getParameterByName(url, 'ccid');
    if (cid == "34" || cid == "37") {
        $(this)
            .attr('href', 'javascript:void(0);')
            .css({ color: 'black', cursor: 'default' });
    }
});

How can I modify the code so if the query string is 34 or 37 and if the third column is a Y make the font color red instead of black otherwise make the font color red. Leave everything else in the code as is.

This question is so unclear. Do you mean to say if cid is 34 or 37, then for each row where the third column contains a value of Y, set the font color to red. Otherwise, leave it black? — Brent Barbata, Oct 23 '15 at 20:08

Rahul Singh · Answer 1 · 2015-10-23T19:59:15.207

3

You can find the third column like this:-

 var url = $(this).attr("href");
 var cid = getParameterByName(url, 'ccid');
 var parentrow = $(this).parents('tr')[0]; //find the parent tr
 var thirdColumn = $('td:nth-child(3)', parentrow); //find 3rd td in that tr

Then, simply apply the condition:-

if (cid == "34" || cid == "37") {
     if (thirdColumn.text() == "Y")
          $(this).css({ color: 'red', cursor: 'default' });
     else
          $(this).attr('href', 'javascript:void(0);')
                 .css({ color: 'black', cursor: 'default' });
}

edited Oct 23 '15 at 19:59

answered Oct 23 '15 at 19:50

Rahul Singh

21,585
6
41
56

1

@SiKni8 - You're Welcome :) Can you tell me if you faced any issue while running my code? Cz it didn't need any class to be added. – Rahul Singh Oct 26 '15 at 13:55
1

Actually your code works fine also but I went with the class option because of other things that I needed to do. I +1 your solution because it works :) – Si8 Oct 26 '15 at 16:08

score 1 · Answer 2 · edited May 23 '17 at 12:23

1

You can put a class on the cell when it's a Y, and then find by that class as specified in this answer.

Just add something like this in your codebehind for the row (pseudo-code):

if (cell.Value == "Y")
{
cell.CssClass="something"
}

Then you can pick up the class with jQuery's $(".something") syntax.

edited May 23 '17 at 12:23

Community

1
1

answered Oct 23 '15 at 19:42

Tim

4,051
10
36
60

score 1 · Answer 3 · answered Oct 23 '15 at 19:48

EDIT (So while I was typing this the above answerer suggested this already) If I'm understanding this correctly you could simply add a class to the <td>'s that will have a 'Y' for content and instead of targeting $(this) use $(this.new_class) (or how ever you select that) and apply the changes.

score 1 · Answer 4 · answered Oct 23 '15 at 19:50

You need to differentiate Y/N td from other td elements. In this example I have used .YN class to distinguish

var getParameterByName = function(url, name) {
  if (!url) url = location.href;
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(url);
  return results == null ? null : results[1];
};


$("#ctl00_centerContent_GridView1 tr td a").each(function() {
  var url = $(this).attr("href");
  var cid = getParameterByName(url, 'ccid');
  if ((cid == "34" || cid == "37") && $(this).parents('tr').find('.YN').text() === 'Y') {
    $(this)
      .attr('href', 'javascript:void(0);')
      .css({
        color: 'red',
        cursor: 'default'
      });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table cellspacing="2" cellpadding="2" align="Center" border="0" id="ctl00_centerContent_GridView1" style="border-color:Gray;border-width:1px;border-style:solid;">
  <tbody>
    <tr style="background-color:SeaShell;">
      <td class="nonpar" style="color:Red;font-weight:bold;"><a href="javascript:void(0);" style="color: black; cursor: default;">Entry #1</a>
      </td>
      <td align="center" style="color:Red;">&nbsp;</td>
      <td align="center" class="YN">N</td>
      <td>&nbsp;</td>
    </tr>
    <tr style="background-color:SeaShell;">
      <td class="nonpar" style="color:Red;font-weight:bold;"><a href="javascript:void(0);" style="color: black; cursor: default;">Entry #2</a>
      </td>
      <td align="center" style="color:Red;">&nbsp;</td>
      <td align="center" class="YN">N</td>
      <td>&nbsp;</td>
    </tr>
    <tr style="background-color:SeaShell;">
      <td class="nonpar" style="color:Red;font-weight:bold;"><a href="javascript:void(0);" style="color: black; cursor: default;">Entry #3</a>
      </td>
      <td align="center" style="color:Red;">&nbsp;</td>
      <td align="center" class="YN">Y</td>
      <td>&nbsp;</td>
    </tr>
    <tr style="background-color:SeaShell;">
      <td class="nonpar" style="color:Red;font-weight:bold;"><a href="http://localhost/SO/index.html?ccid=37" style="color: black; cursor: default;">Entry #4</a>
      </td>
      <td align="center" style="color:Red;">&nbsp;</td>
      <td align="center" class="YN">Y</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

Jhonatan Muller · Accepted Answer · 2015-10-23T20:02:15.883

1. Add a class to each <td> who has the Y/N value like this:

 <td align="center" class="yes_no">Y</td>

2. Update your each to look at sibling .yes_no text like this:

$("#ctl00_centerContent_GridView1 tr td a").each(function () {
    var url = $(this).attr("href");
    var cid = getParameterByName(url, 'ccid');
    var yes_no_value = $(this).parent('td').siblings('.yes_no').text();
    if (cid == "34" || cid == "37") {
        var new_color = (yes_no_value == 'N') ? 'red' : 'black';
        $(this)
            .attr('href', 'javascript:void(0);')
            .css({ color: new_color, cursor: 'default' });
    }
});

Thank you. Although most of them can work, this solved the issue for me. — Si8, Oct 26 '15 at 13:46

Brent Barbata · Answer 6 · 2015-10-24T01:09:35.190

I'd rather see this done with css (not writing styles directly as html attributes), but here you go:

$('#ctl00_centerContent_GridView1 tr td a').each(function () {
    var url = $(this).attr('href'),
        cid = getParameterByName(url, 'ccid');

    if (cid == '34' || cid == '37') {
        var $parent = $(this).parents('tr');

        if ($parent.children('td:nth-child(3)').text() === 'Y') {
            var $children = $parent.children('td');

            $children
                .css({ 'color': 'red' })
                .find('a').css({ 'color': 'red' });
        }
    }
});

Feel free to condense the code. I've assigned variables so you can easily tell what's happening.

'use strict';

var cid = '34';

$(document).on('ready', function() {
  $('#ctl00_centerContent_GridView1 tr td a').each(function() {
    var url = $(this).attr('href'); //,
    //cid = getParameterByName(url, 'ccid');

    if (cid == '34' || cid == '37') {
      var $parent = $(this).parents('tr');

      if ($parent.children('td:nth-child(3)').text() === 'Y') {
        var $children = $parent.children('td');

        $children.css({
            'color': 'red'
          })
          .find('a').css({
            'color': 'red'
          });
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table cellspacing="2" cellpadding="2" align="Center" border="0" id="ctl00_centerContent_GridView1" style="border-color:Gray;border-width:1px;border-style:solid;">
  <tbody>
    <tr style="background-color:SeaShell;">
      <td class="nonpar" style="color:Red;font-weight:bold;"><a href="javascript:void(0);" style="color: black; cursor: default;">Entry #1</a>

      </td>
      <td align="center" style="color:Red;">&nbsp;</td>
      <td align="center">N</td>
      <td>&nbsp;</td>
    </tr>
    <tr style="background-color:SeaShell;">
      <td class="nonpar" style="color:Red;font-weight:bold;"><a href="javascript:void(0);" style="color: black; cursor: default;">Entry #2</a>

      </td>
      <td align="center" style="color:Red;">&nbsp;</td>
      <td align="center">N</td>
      <td>&nbsp;</td>
    </tr>
    <tr style="background-color:SeaShell;">
      <td class="nonpar" style="color:Red;font-weight:bold;"><a href="javascript:void(0);" style="color: black; cursor: default;">Entry #3</a>

      </td>
      <td align="center" style="color:Red;">&nbsp;</td>
      <td align="center">Y</td>
      <td>&nbsp;</td>
    </tr>
    <tr style="background-color:SeaShell;">
      <td class="nonpar" style="color:Red;font-weight:bold;"><a href="javascript:void(0);" style="color: black; cursor: default;">Entry #4</a>

      </td>
      <td align="center" style="color:Red;">&nbsp;</td>
      <td align="center">Y</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

How to set default color based on a column condition

6 Answers6