使用 Javascript 显示/隐藏表行 - Show/Hide Table Rows with Javascript

我有一个价格数组，我输出到一个带有foreach循环的表中。

我正在尝试弄清楚如果满足条件，如何隐藏表中的行。如果价格为 => 30，则$status变量的计算结果为 "YES"，如果价格为 < 30，则计算结果为 "NO"。

<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>

我尝试将tr id设置为适当的状态。因此，在Javascript函数中，我尝试将$status传递给getElementById然后应该显示比30 >的价格并隐藏< 30的价格。
该按钮用于在显示所有数据或过滤这些价格> 30之间切换。

我知道这是一个非常基本的例子，可能犯了很多错误，但我会感谢任何帮助。

干杯

首先，你的代码有错误的顺序（你试图在变量被设置之前读取它们）。因此，它给出了未定义的值。请确保在将$price和$status传递给脚本之前设置它们。也不要使用id作为显示/隐藏条件（因为 id 必须是唯一的），而是使用类。

<?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>

首先，您的代码将生成具有相同 id（是或否）的多行。在HTML中，只能有一个id，所以也许把它改成class而不是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");
}

js小提琴：http://jsfiddle.net/rfornal/o633c360/

在这个例子中，我使用了jQuery，只是为了更快地启用点击事件。您可以同样轻松地使用代码中使用的 onclick。

<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>