更改查询中交替行的颜色答案

【问题标题】：change colour of alternating rows in query更改查询中交替行的颜色
【发布时间】：2013-06-04 19:08:51
【问题描述】：

我有这张表，偶数行是灰色的（奇数行是白色的）：

$("td").filter(function(){ return $(this).text() == '1'; }).text('One');
$("td").filter(function(){ return $(this).text() == '2'; }).text('Two');
$("td").filter(function(){ return $(this).text() == '3'; }).text('Three');
$("td").filter(function(){ return $(this).text() == '4'; }).text('Four');
$("td").filter(function(){ return $(this).text() == '5'; }).text('Five');
$("td").filter(function(){ return $(this).text() == '6'; }).text('Six');

然后我像这样删除了第 3 行：

$("tr:contains('3')").hide();

现在我的表格有第 2 行和第 4 行，它们一起显示为灰色。尽管删除了一行，我如何保留备用行颜色？

这是我的 HTML 代码：

<html>
<head>
    <link type="text/css" rel="stylesheet" href="css.css" />
<script src="jquery-1.10.1.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() == '1'; }).text('One');
        $("td").filter(function(){ return $(this).text() == '2'; }).text('Two');
        $("td").filter(function(){ return $(this).text() == '3'; }).text('Three');
        $("td").filter(function(){ return $(this).text() == '4'; }).text('Four');
        $("td").filter(function(){ return $(this).text() == '5'; }).text('Five');
        $("td").filter(function(){ return $(this).text() == '6'; }).text('Six');

            $("tr:contains('3')").hide();
            }
        }   
        xmlhttp.open("POST", "process_this_table.php", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send();       
    }
    </script>
</head>

<body onload="View();">
    <div id="datatable"></div>
</body>

</html>

这是我的 CSS：

body{
  padding: 100px;
  margin: 20;
  font: 2em Times New Roman, Helvetica, sans-serif;
}
table{
  border-collapse: separate;
  border-radius: 10px 10px 10px 10px;
  border: 1px solid red;
  width: 600px;
  box-shadow: -20px 20px 20px #313030;
}
td {
  padding: 0.4em;
  border: 1px solid red;
}

我想您会告诉我为 tr 添加属性，并且可能会告诉我插入您提供的代码，对吧？如果是这样，请您提供语法。我知道你不能将 jquery 插入 css。

星期二。美国东部时间 2013 年 6 月 4 日晚上 7:50 这是process_this_table.php里面的表结构：

<?php
echo "<table>"; 
    $rows=array('row 1','row 2','row 3');
    $columns=array('column 1','column 2','column 3');
    $rlength=count($rows);
    $clength=count($columns);
    for($i=0;$i<$rlength;$i++){
    echo "<tr>";        
    if($i%2){
        echo "<td style=\"background-color: rgb(212,212,212);\">".$rows[$i]."</td>";
    for($j=1;$j<$clength;$j++)
        echo "<td style=\"background-color: rgb(212,212,212);>blah blah</td>";
    }
    else{
        echo "<td>".$rows[$i]."</td>"; 
    for($j=1;$j<$clength;$j++)
        echo "<td>blah blah</td>"; 
    }
    echo "</tr>";
    }
echo "</table>"; 
?>

此 process_this_table.php 来自远程服务器，因此我无法修改偶数行上的交替灰色 (212,212,212)。出于我的目的，我更愿意指定要更改颜色的行而不是奇数或偶数，例如 $("tr:nth-child(2)").css("background-color", "lightblue") ;.为什么该代码不起作用，但指定了一个奇怪的行，如 $("tr:nth-child(1)").css("background-color", "lightblue");有吗？

星期三。美国东部时间 2013 年 6 月 5 日下午 12:50 一切都很好，感谢你们所有人，尤其是 Karl-Andre。不过，我还想要一件事。例如，如何重新排列行，以便第 4 行位于第 1 行？提前致谢。

【问题讨论】：

当我询问 HTML 时，我指的是 HTML 输出，在您的 Javascript 加载内容之后。我想看看你的<table> 和里面有什么！
您好，Karl，抱歉，我不确定您的意思。只需想象一张表格，其中偶数行为灰色，奇数行为白色（无颜色）。不过，我添加了原始帖子中的 process_this_table.php 以显示该表是如何构建的。
我了解 PHP，这足以发现您的问题。给出答案！
我需要查看 DOM，这样我才能发现任何 style 属性或 DOM 的实际制作方式。

标签： jquery row alternating

【解决方案1】：

那么这个解决方案呢，我认为你可以将它用于你的目的：

$('tr').each(function(i) {
  if (i % 2)
    $(this).css('background-color', 'red');
  else 
    $(this).css('background-color', 'gray');
});

http://jsfiddle.net/TQZfP/1/

【讨论】：

使用.css('propName',function(i,v) -- FIDDLE可以减少您的解决方案
应该是$('tr:visible')
它绝对可以，感谢您指出，但我想他可能想做的不仅仅是设置一个属性，为此我发布了我的代码 - 你的代码显然更短，也回答了这个问题!
他只是要求行，不可见行，当然你可以使用任何你想要的选择器。
问题是说可以删除一行（实际上是隐藏的）：“$("tr:contains('3')").hide(); 现在我的表格有第 2 行和第 4 行一起着色为灰色。尽管删除了一行，我如何保留备用行颜色？ ”。作为一个好的答案，它需要检查行是否可见。

【解决方案2】：

您可以使用 jQuery :odd 选择器正确设置颜色。

Documentation here.

$("tr:odd").css("background-color", "#bbbbff");

【讨论】：

【解决方案3】：

我正在完成luk2302的回答。

您需要遍历tr，但更改td's css，因为它们是带有style 标签的那个。

$('tr:visible').each(function(i){
    $(this).find('td').css('background-color', i%2 ? 'red':'grey');
})

希望它有效。

【讨论】：

上面的代码所做的是使表格看起来像一个棋盘，在所有行上都有红色和灰色交替的单元格。我想我们已经接近了。一定是我的php代码。
tr:visible 效果更好，除了它只改变白色行的颜色。硬编码 (212,212,212) 行保持灰色。
我很笨，没有仔细阅读PHP。编辑了我的答案，现在应该可以了！
行得通！例如，我如何对其进行编码，以便我只希望第 2 行显示为红色？
没关系！我将 tr:visible 修改为 tr:nth-child(2)。完美运行！谢谢！！！