如何根据列条件设置默认颜色

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.

Answer 1

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' });
}

Answer 2

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.

Answer 3

编辑（所以当我输入这个时，上面的回答者已经提出了这个问题）如果我正确地理解了这一点，你可以简单地在<td>添加一个类，其内容为'Y'，而不是以$(this)为目标$(this)使用$(this.new_class)或怎么过你选择），并应用更改。

Answer 4

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> 

Answer 5

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' });
    }
});

Answer 6

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>