Изменить цвет чередующихся строк в запросе

У меня есть эта таблица с четными строками серого цвета (нечетные строки белого цвета):

$("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.

Вт 4 июня 2013 7:50 EST Это структура таблицы внутри 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"); делает?

Мы бы. 5 июня 2013 12:50 EST Все хорошо, спасибо всем вам, особенно Карлу-Андре. Я хотел бы еще одну вещь, хотя. Как переставить строки, чтобы строка 4 была, например, в строке 1? Заранее спасибо.

Источник

3 ответа

А что насчет этого решения, я думаю, вы могли бы использовать его для своих целей:

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

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

Источник

Вы можете использовать jQuery:odd селектор, чтобы правильно установить цвета.

Документация здесь.

$("tr:odd").css("background-color", "#bbbbff");
Источник

Я заканчиваю ответ luk2302.

Вам нужно пройти через tr но изменить td's CSS, так как они с style тег.

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

Надеюсь, это сработает.

Источник
Другие вопросы по тегам