Показать/скрыть строки таблицы с Javascript

Question

У меня есть массив цен, которые я выводю в таблицу с помощью цикла foreach.

Я пытаюсь выяснить, как скрыть строки в таблице, если выполнено условие. Переменная $status оценивается как «ДА», если цена равна => 30 и «НЕТ», если < 30.

<script type="text/javascript"> 
    function displayRow(){ 
    var row = document.getElementById("<?php echo $status;?>"); 
    if (row.id == 'YES') row.id= 'none'; 
    else row.display = ''; 
    } 
</script> 

<?php 
    if($price > 30.00){ 
    $status = "YES"; 
    }else if($price < 30.00){ 
    $status = "NO"; 
    } 

    $prices = array ("20", "56", "33", "12", "66", "25", "55"); 
    echo "<table border='1'>"; 
    foreach ($prices as $price) { 
    echo "<tr id='$status'><td>$price</td></tr>"; 
    } 
    echo "</table>"; 
?> 

<button onclick="displayRow()" >Show/Hide</button> 

Я попытался установить trid с соответствующим статусом. Итак, в функции Javascript я пытаюсь передать $status в getElementById, который затем должен отображать цены >, чем 30, и скрыть те, что являются < 30.
Кнопка предназначена для переключения между отображением всех данных или фильтрацией этих цен > 30.

Я знаю, что это очень простой пример и, вероятно, совершил много ошибок, но я был бы признателен за любую помощь.

Приветствия

Answer 1

Прежде всего, ваш код имеет неправильный порядок (вы пытаетесь прочитать переменные до их установки). Поэтому он дает неопределенные значения. Убедитесь, что вы установили $price и $status, прежде чем передавать их сценарию. Также не используйте id как условие show/hide (поскольку идентификатор должен быть уникальным), используйте вместо этого класс.

<?php 
    $price = 31; 

    $prices = array ("20", "56", "33", "12", "66", "25", "55"); 
    echo "<table border='1'>"; 
    foreach ($prices as $price) { 
    echo "<tr style='display:block;' class='".($price > 30 ? 'YES' : 'NO')."'><td>$price</td></tr>"; 
    } 
    echo "</table>"; 
?> 

<script type="text/javascript"> 
    function displayRow(){ 
    var elems = document.getElementsByClassName("<?php echo ($price > 30 ? 'YES' : 'NO');?>"); 
    for (var i=0;i<elems.length;i+=1){ 
     if(elems[i].style.display == 'block'){ 
     elems[i].style.display = 'none'; 
     }else{ 
     elems[i].style.display = 'block'; 
     } 
    } 
    } 
</script> 
<button onClick="displayRow()" >Show/Hide</button> 

Answer 2

Во-первых, ваш код будет генерировать несколько строк с одинаковым идентификатором (Да или Нет). В HTML может быть только один id, поэтому, возможно, измените это на класс вместо id.

Во-вторых, я бы не «спрятал» строку по коду. Если вы добавляете класс, используйте CSS, чтобы скрыть строки с соответствующим классом.

Дано: HTML

<table> 
    <tr> 
     <td>Visible Data</td> 
    </tr> 
    <tr class='dontshow'> 
     <td>Invisible Data</td> 
    </tr> 
    <tr class='hidethis'> 
     <td>Visible Data, can change</td> 
    </tr> 
    <tr class='hidethis'> 
     <td>Visible Data, can change</td> 
    </tr> 
</table> 
<button id="hide">Hide</button> 
<button id="show">Show</button> 

И CSS

.dontshow { 
    display:none; 
} 

Попробуйте это, чтобы скрыть строку ...

var rows = document.getElementsByClassName("hidethis"); 
for (var i = 0; i < rows.length; i++) { 
    rows[i].setAttribute("class", "hidethis dontshow"); 
} 

... и что-то вроде это для отображения строки ...

var rows = document.getElementsByClassName("hidethis"); 
for (var i = 0; i < rows.length; i++) { 
    rows[i].setAttribute("class", "hidethis"); 
} 

jsFiddle: http://jsfiddle.net/rfornal/o633c360/

Я использовал JQuery в данном примере, чтобы просто включить клики события быстрее. Вы можете так же легко использовать onclick, используемый в вашем коде.

Answer 3

<script type="text/javascript"> 
function displayRow(){ 
    var list = document.getElementsByClassName('NO'); 

    for (var i = 0; i < list.length; i++) { 
     if (list[i].style.display !== "none") { 
      list[i].style.display = "none"; 
     } 
     else { 
      list[i].style.display = "inline-block"; 
     } 
    } 
} 
</script> 

<?php 
    $prices = array ("20", "56", "33", "12", "66", "25", "55"); 
    echo "<table border='1'>"; 
    foreach ($prices as $price) { 
     if($price >= 30.00) { 
     $status = "YES"; 
     }else if ($price < 30.00) { 
     $status = "NO"; 
     } 
     echo "<tr class='$status' style="display:inline-block"><td>$price</td></tr>"; 
    } 
    echo "</table>"; 
?> 

<button onclick="displayRow()" >Show/Hide</button>