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

【问题标题】：How to set default color based on a column condition如何根据列条件设置默认颜色
【发布时间】：2016-01-23 10:50:49
【问题描述】：

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

我正在通过 JQuery 设置 Url、颜色和光标：

$("#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' });
    }
});

如何修改代码，以便如果查询字符串是34 或37，并且如果第三列是 Y，则将字体颜色设为红色而不是黑色，否则将字体颜色设为红色。保留代码中的所有其他内容。

【问题讨论】：

这个问题太不清楚了。你的意思是说如果 cid 是 34 还是 37，那么对于第三列包含 Y 值的每一行，将字体颜色设置为红色。否则，让它变黑？

标签： javascript jquery html css asp.net

【解决方案1】：

当单元格为 Y 时，您可以在单元格上放置一个类，然后按照 this answer 中指定的该类查找。

只需在行的代码隐藏中添加类似这样的内容（伪代码）：

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

然后你可以使用 jQuery 的$(".something") 语法来学习这个类。

【讨论】：

【解决方案2】：

编辑（所以当我输入这个时，上面的回答者已经建议了这个）如果我理解正确，你可以简单地向<td>'s 添加一个类，它的内容将有一个“Y”而不是定位 $(this) 使用 $(this.new_class)（或您如何选择）并应用更改。

【讨论】：

【解决方案3】：

你可以像这样找到第三列：-

 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

然后，简单地应用条件：-

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

【讨论】：

@SiKni8 - 不客气 :) 你能告诉我在运行我的代码时是否遇到任何问题吗？ Cz 它不需要添加任何类。
实际上您的代码也可以正常工作，但我选择了 class 选项，因为我需要做其他事情。我 +1 你的解决方案，因为它有效:)

【解决方案4】：

您需要将Y/N td 与其他td 元素区分开来。在这个例子中我使用了.YN类来区分

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>

【讨论】：

【解决方案5】：

1.为每个具有如下 Y/N 值的 <td> 添加一个类：

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

2。更新您的each 以查看兄弟.yes_no 文本，如下所示：

$("#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' });
    }
});

【讨论】：

谢谢。尽管它们中的大多数都可以工作，但这为我解决了问题。

【解决方案6】：

我宁愿看到这用 css 完成（不直接将样式写为 html 属性），但是你去：

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

随意压缩代码。我已经分配了变量，所以你可以很容易地知道发生了什么。

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

【讨论】：