Show/Hide Table Rows with Javascript

Question

I have an array of prices that I output to a table with a foreach loop.

I'm trying to figure out how to hide rows in the table if a condition is met. The $status variable evaluates to "YES" if price is => 30 and "NO" if < 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>

I've tried setting the tr id with the appropriate status. So then in the Javascript function I try to pass the $status in to getElementById which should then display the prices that are > than 30 and hide those that are < 30.
The button is meant to toggle between display all the data or filter those prices > 30.

I know this is a very basic example and have probably made a lot of mistakes, but I'd appreciate any help.

Cheers

That won`t work, this code is so bad... First of all <?php echo $status;?> returns nothing, second in your if($price) $price is not set so after if else section $status = "NO" so your output table will contain rows with id="NO", and that's also a bad thing because id should be unique... — szapio
– szapio, Commented Jan 23, 2015 at 13:19
Also, in a DOM, ids shall be unique. You may use classes and getElementsByClassName or querySelectorAll — Diego
– Diego, Commented Jan 23, 2015 at 13:32

Artur Filipiak · Accepted Answer · 2015-01-23 14:04:32Z

2

First of all, your code has wrong order (you're trying to read variables before they're even set). Therefore it gives undefined values. Make sure you set the $price and $status before you pass them to the script. Also don't use id as show/hide condition (as id have to be unique), use class instead.

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

edited Jan 23, 2015 at 14:04

answered Jan 23, 2015 at 13:40

Artur Filipiak

9,1874 gold badges33 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hexana Over a year ago

This is excellent Phillip, a very elegant solution indeed!! I appreciate your time and help.

bob-fornal · Accepted Answer · 2015-01-23 13:32:50Z

First, your code will generate multiple rows with the same id (Yes or No). In HTML, there can be only one id, so maybe change this to class instead of id.

Second, I wouldn't "hide" the row via code. If you are adding a class use CSS to hide the rows with the appropriate class.

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

And, CSS

.dontshow {
    display:none;
}

Try this to hide a row ...

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

... and something like this to display a row ...

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

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

I used jQuery in this example, SIMPLY to enable the click events faster. You can just as easily use the onclick used in your code.

danieledc · Accepted Answer · 2015-01-24 14:23:21Z

1

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

edited Jan 24, 2015 at 14:23

answered Jan 23, 2015 at 13:36

danieledc

1011 gold badge2 silver badges10 bronze badges

Collectives™ on Stack Overflow

Show/Hide Table Rows with Javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related