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>

我正在通过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，则如何修改代码，使字体颜色为红色而不是黑色，否则将字体颜色设置为红色。保留代码中的所有其他内容。

Answer 1

您可以找到第三列，如下所示： -

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

Answer 2

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

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

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

然后你可以用jQuery的$(".something")语法来学习这门课程。

Answer 3

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

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

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

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

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

6 个答案: