Question

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

如果条件满足，我正在试图弄清楚如何隐藏表中的行。 $status变量评估为“YES”如果价格为=> 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>

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

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

干杯

Answer 1

首先，你的代码有错误的顺序（你试图在变量设置之前读取它们）。因此它给出了未定义的值。确保在将$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>

Answer 2

首先，您的代码将生成具有相同ID（是或否）的多个行。在HTML中，可能只有一个 ID，因此可能将其更改为class而不是id。

其次，我不会＆＃34;隐藏＆＃34;通过代码的行。如果要添加类，请使用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，SIMPLY可以更快地启用点击事件。您可以轻松使用代码中使用的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>

使用Javascript显示/隐藏表格行

3 个答案: