Jquery 交替行颜色，隐藏某些行
第三次尝试。我从远程服务器提取了一个表，并使用Jquery 交替行颜色，隐藏某些行,jquery,html-table,Jquery,Html Table,第三次尝试。我从远程服务器提取了一个表，并使用$（'tr:nth child（row#））.hide（）隐藏了一些行。现在，表格行颜色不交替。此外，表格单元格的颜色根据单元格中的内容而变化。如果单元格值为81-100%，则为绿色；如果单元格值为61-80%，则为橙色；如果单元格值为0-60%，则为红色。以下是我的jquery： $(document).ready(function(){ $('tr:even').addClass('even'); $('tr:odd').addClass
$（'tr:nth child（row#））.hide（）隐藏了一些行。现在，表格行颜色不交替。此外，表格单元格的颜色根据单元格中的内容而变化。如果单元格值为81-100%，则为绿色；如果单元格值为61-80%，则为橙色；如果单元格值为0-60%，则为红色。以下是我的jquery：
$(document).ready(function(){
$('tr:even').addClass('even'); $('tr:odd').addClass('odd');
});
var $trs = $('tr').removeClass('even odd').filter(":visible");
$trs.filter(':even').addClass('even');
$trs.filter(':odd').addClass('odd');
这是我的CSS:tr.odd td{背景色：#FFFFFF；}tr.偶数td{背景色：#c0c0；}
上面的代码实际上会交替行，但会删除单元格的颜色。而tr.odd{背景色：#FFFFFF；}tr.偶数{背景色：#c0c0；}
保留单元格的颜色，但删除交替颜色。请帮忙
以下是我的整个HTML：
<html>
<head>
<link type="text/css" rel="stylesheet" href="css.css" />
<script src="jquery-1.10.1.min.js"></script>
<script language="Javascript">
function View(){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("datatable").innerHTML=xmlhttp.responseText;
$("td").filter(function(){ return $(this).text()=='R1';}).text('Row1'); //white
$("td").filter(function(){ return $(this).text()=='R2';}).text('Row2'); //grey
$('tr:nth-child(3)').hide(); //white
$("td").filter(function(){ return $(this).text()=='R4';}).text('Row4'); //grey
$('tr:nth-child(5)').hide(); //white
$("td").filter(function(){ return $(this).text()=='R6';}).text('Row6'); //grey
$("td").filter(function(){ return $(this).text()=='R7';}).text('Row7'); //white
// Alternate visible rows to white and grey
$(document).ready(function(){
$('tr:even').addClass('even');
$('tr:odd').addClass('odd');
});
var $trs = $('tr').removeClass('even odd').filter(":visible");
$trs.filter(':even').addClass('even');
$trs.filter(':odd').addClass('odd');
}
}
var parameters = "search="+"rog_en_vo_ts_t1";
xmlhttp.open("POST", "http://process_this_table.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(parameters);
}
</script>
</head>
<body onload="View();" >
<div id="datatable" align="center"></div>
</body>
</html>
请帮忙。我想这可能就是你要找的
单击一行将其删除。交替的颜色被保留，单元格根据其值相应地显示
交替行的关键是在奇数或偶数之前要求可见
函数setRowColor（）{
$（'table tr:visible:odd'）.css（{“background”：“grey”}）；
$（'table tr:visible:even'）.css（{“background”：“lightgrey”}）；
$（'td.percentage'）。每个（函数（）{
如果（$（this.html（）>80）{
$（this.css（{“背景”：“绿色”}）；
}else if（$（this.html（））你能提供一个JSFIDLE吗？这里是jsFIDLE.net/nTtyd。你的FIDLE不工作，你的ajax调用也是一个本地地址-所以我们看不到你从user887515中提取的数据。不知道如何使用FIDLE。请询问与我的代码相关的任何问题，我会解释。谢谢。我也不确定如何模拟ajax调用，所以我们将跳过它。你是如何根据单元格值设置颜色的？我在小提琴上看不到。这是可行的！但让我进一步解释一下。只有一列有这种条件。该列称为“ROI”。其他列有不同的条件。例如，另一列名为“欠债”如果值为0，则无法显示红细胞。因此，如何对其进行编码，使其基于列标题名而不是TD类，因为我不知道远程访问的此表的详细信息。谢谢。您必须找出欠债列的列号，然后应用于第n个子项（“欠债列数”）你可能应该问这个新问题，因为你在这里问的是关于交替行颜色的问题。我想我明白了。我用$（'td.percentage'）。
替换为$（'th”）.filter（函数（）{return$（this.text（）='Debt Owed'；}）.
并且条件仅针对该列。user887515，非常感谢！我的朋友，你会得到祝福的。抱歉，等等，行不是交替的白色和灰色。我仍然需要帮助。它们是交替的。我没有选择白色和灰色，而是浅灰色和灰色，但它们是交替的。在最新的Chrome、FF和IE8、9和10中测试。你呢在IE10中使用JSFIDLE的最新jQuery可能会有问题，请切换到以前的版本，这样就可以了。
tr.odd{background-color: #FFFFFF;}
tr.even{background-color: #C0C0C0;}
function setRowColours(){
$('table tr:visible:odd').css({"background": "grey"});
$('table tr:visible:even').css({"background": "lightgrey"});
$('td.percentage').each(function(){
if($(this).html() > 80){
$(this).css({"background": "green"});
} else if($(this).html() <= 60){
$(this).css({"background": "red"});
} else{
$(this).css({"background": "orange"});
}
});
}
$(document).ready(function(){
setRowColours();
});
$('tr').click(function(){
$(this).hide();
setRowColours();
});