Переменные цвета строк с некоторыми строками скрыты

3-я попытка. У меня есть таблица, вытащенная с удаленного сервера, и я спрятал несколько строк, используя $('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{ background-color: #FFFFFF;} tr.even td{background-color: #C0C0C0;}

Вышеуказанные коды фактически чередовать ряды, но она удаляет цвета ячеек. В то время как tr.odd{ background-color: #FFFFFF;} tr.even{background-color: #C0C0C0;} сохраняет цвета ячеек, но удаляет чередующиеся цвета. Пожалуйста помоги.

Вот весь мой 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>

А вот мой CSS:

tr.odd{background-color: #FFFFFF;} 
tr.even{background-color: #C0C0C0;}

Пожалуйста, помогите.

источник

2013-06-08 user2430338

Можете ли вы предоставить jsFiddle, пожалуйста? – fynn

Здесь вы идете jsfiddle.net/nTtyd. – user2430338

Кто-нибудь еще, пожалуйста? – user2430338

Я думаю, что это может быть то, что вы ищете.

Щелкните по строке, чтобы удалить ее. Переменные цвета сохраняются, и ячейки показывают соответственно на основе их стоимости.

Ключом для чередующихся рядов является запрос на видимость до нечетного или четного.

http://jsfiddle.net/WWFUr/

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(); 
});

источник

2013-06-08 22:22:00 user887515

Это работает! Но позвольте мне объяснить дальше. Это условие имеет только 1 столбец. Этот столбец называется «ROI». Другие столбцы имеют разные условия.Например, другой столбец с именем «Долг Owed» не может отображать красную ячейку, если это значение равно 0. Так как я могу это кодировать так, чтобы он был основан на имени заголовка столбца, а не на классе TD, так как я не знаю специфики эту таблицу я получаю удаленно. Спасибо. – user2430338

Вам нужно будет узнать номер столбца столбца «Долг задолженностей», а затем применить к nth-child («номер долгового столбца») tr. Вероятно, вы должны задать это как новый вопрос, поскольку вопрос, который вы задали здесь, касался чередующихся цветов строк. – user887515

Думаю, я понял. Я заменил '$ ('td.percentage').' С '$ (" th "). Filter (function() {return $ (this) .text() == 'Debt Owed';}).' И условие было специфичным только для этой колонки. user887515, большое вам спасибо! Вы будете благословлены моим другом. – user2430338

Переменные цвета строк с некоторыми строками скрыты

ответ

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