<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;"> </td>
<td align="center">N</td>
<td> </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;"> </td>
<td align="center">N</td>
<td> </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;"> </td>
<td align="center">Y</td>
<td> </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;"> </td>
<td align="center">Y</td>
<td> </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,则如何修改代码,使字体颜色为红色而不是黑色,否则将字体颜色设置为红色。保留代码中的所有其他内容。
答案 0 :(得分: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' });
}
答案 1 :(得分:1)
当单元格为Y时,您可以在单元格上放置一个类,然后按this answer中指定的那个类查找。
只需在代码隐藏中添加类似的内容(伪代码):
if (cell.Value == "Y")
{
cell.CssClass="something"
}
然后你可以用jQuery的$(".something")
语法来学习这门课程。
答案 2 :(得分:1)
编辑(所以当我输入这个时,上面的回答者已经建议了这一点)如果我正确地理解了这一点,你可以简单地在<td>
上添加一个类,其中包含内容的'Y'和而不是定位$(this)
使用$(this.new_class)
(或者如何选择)并应用更改。
答案 3 :(得分:1)
您需要将
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;"> </td>
<td align="center" class="YN">N</td>
<td> </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;"> </td>
<td align="center" class="YN">N</td>
<td> </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;"> </td>
<td align="center" class="YN">Y</td>
<td> </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;"> </td>
<td align="center" class="YN">Y</td>
<td> </td>
</tr>
</tbody>
</table>
答案 4 :(得分:1)
<强> 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' });
}
});
答案 5 :(得分:1)
我宁愿用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;"> </td>
<td align="center">N</td>
<td> </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;"> </td>
<td align="center">N</td>
<td> </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;"> </td>
<td align="center">Y</td>
<td> </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;"> </td>
<td align="center">Y</td>
<td> </td>
</tr>
</tbody>
</table>