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

У меня есть эта таблица с четными строками цветных серый (нечетные строки белые):изменение цвета чередующихся строк в запросе

$("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; 
}

Я полагаю, вы расскажете мне добавить атрибуты для тр и, вероятно, скажет мне, чтобы вставить код при условии права? Если да, можете ли вы предоставить синтаксис. Я знаю, что вы не можете вставить jquery в css.

Tue. . 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 от удаленного сервера, так что я не могу изменить чередуя серый цвет (212212212) на четные строки. Для моей цели я бы предпочел указать, какую строку я хочу изменить цвет, вместо того, чтобы делать нечетные или четные, например, это $ («tr: nth-child (2)»). Css («background-color», «lightblue») ;. Почему этот код не работает, но задает нечетную строку типа $ («tr: nth-child (1)»). Css («background-color», «lightblue»); делает?

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

источник

2013-06-04 user2430338

Когда я спросил HTML, я имел в виду вывод HTML после загрузки содержимого Javascript. Я хочу видеть ваш '

' и что внутри! –

Привет, Карл, извините, я не уверен, что вы имеете в виду. Просто изобразите таблицу с четными строками как серые и нечетные строки как белые (без цвета). Я добавил process_this_table.php из моего исходного сообщения, чтобы показать, как построена таблица. – user2430338

Я понимаю PHP, и этого достаточно, чтобы определить вашу проблему. Ответ! –

ответ

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

Documentation here.

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

источник

2013-06-04 19:12:25

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

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

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

источник

2013-06-04 19:17:37 luk2302

Ваше решение может быть уменьшено с помощью [.css ('propName', function (i, v)] (http://api.jquery.com/css/#css-propertyName-functionindex--value) - [FIDDLE] (http://jsfiddle.net/wirey00/gU65U/) –

Это должно быть '$ ('tr: visible')' –

, это определенно может, спасибо за указание, но я подумал, что он может сделать больше, чем просто настройки для свойства, для этой цели я разместил свой код - ваш явно короче, а также отвечает на вопрос! – luk2302

Я заполняю luk2302 «s ответ.

Вам необходимо повторить ошибку в тексте: tr, но смени меня на td's css, так как они у теги style.

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

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

источник

2013-06-05 00:21:38

Что делает код выше, так это то, что таблица выглядит как шахматная доска с чередующимися ячейками красного и серого на всех строках. Я думаю, что мы приближаемся. Это должен быть мой PHP-код. – user2430338

tr: видимый работает лучше, за исключением того, что он меняет цвет только на белые строки. Строки с жестким кодированием (212,212,212) остаются серыми. – user2430338

Я немой, не читал PHP тщательно. Отредактировав мой ответ, ТЕПЕРЬ, он должен работать! –

Смежные вопросы