www.webdeveloper.com
Results 1 to 7 of 7

Thread: Hide table row based on column value?

  1. #1
    Join Date
    Mar 2011
    Posts
    13

    Hide table row based on column value?

    I'm wondering how to do this with javascript for a table that i have made in php and html.

    I want to hide the row for the table based on the value inside my first column for each row of the table.

    Like if column 1 has "apple" inside it, then the row would not be shown.
    I'm pretty sure this can be done in javascript but i'm not a coding guy, so any help would be appreciated!

    My table.php file that has the table i want to do this for:
    Code:
    <script language="javascript">
    
    imageX1='plus';
    imageX2='plus';
    imageX3='plus';
    
    function toggleDisplay(e){
    imgX="imagePM"+e;
    tableX="table"+e;
    imageX="imageX"+e;
    tableLink="tableHref"+e;
    imageXval=eval("imageX"+e);
    element = document.getElementById(tableX).style;
     if (element.display=='none') {element.display='block';}
     else {element.display='none';}
     if (imageXval=='plus') {document.getElementById(imgX).src='http://www.pvpstreams.com/icons/wowicon.png';eval("imageX"+e+"='minus';");document.getElementById(tableLink).title='Hide WoW';}
     else {document.getElementById(imgX).src='http://www.pvpstreams.com/icons/wowicon.png';eval("imageX"+e+"='plus';");document.getElementById(tableLink).title='Show WoW';}
    }
    </script>
    
    <?php
    $username="user";
    $password="password";
    $tmp="database";
    
    mysql_connect(localhost,$username,$password);
    @mysql_select_db($tmp) or die( "Unable to select database");
    $query="SELECT * FROM users";
    $result=mysql_query($query);
    
    $num=mysql_numrows($result);
    
    mysql_close();
    ?>
    <table class="sortable" id="wow" border="1" cellpadding="0" cellspacing="0" style="margin-left:auto;margin-right:auto;text-align:left">
    <tr>
    <th><font face="Arial, Helvetica, sans-serif">Game</font></th>
    <th><font face="Arial, Helvetica, sans-serif">Character</font></th>
    <th><font face="Arial, Helvetica, sans-serif">Rating</font></th>
    <th><font face="Arial, Helvetica, sans-serif"><img src="http://www.pvpstreams.com/table-images/xfirelogo.png">&nbsp;Status</font></th>
    <th><font face="Arial, Helvetica, sans-serif"><img src="http://www.pvpstreams.com/table-images/xfirelogo.png">&nbsp;Link</font></th>
    <th><font face="Arial, Helvetica, sans-serif">Realm</font></th>
    <th><font face="Arial, Helvetica, sans-serif"><img src="http://www.pvpstreams.com/table-images/livestreamlogo.png">&nbsp;Status</font></th>
    <th><font face="Arial, Helvetica, sans-serif"><img src="http://www.pvpstreams.com/table-images/livestreamlogo.png">&nbsp;Link</font></th>
    <th><font face="Arial, Helvetica, sans-serif">Team&nbsp;Setup</font></th>
    </tr>
    
    <?php
    $i=0;
    while ($i < $num) {
    
    $f1=mysql_result($result,$i,"wowcharacter");
    $f2=mysql_result($result,$i,"username");
    $f3=mysql_result($result,$i,"livestream");
    $f4=mysql_result($result,$i,"wowserver");
    
    $f5=mysql_result($result,$i,"wowplayer1");
    $f6=mysql_result($result,$i,"wowplayer2");
    $f9=mysql_result($result,$i,"wowplayer3");
    
    $f7=mysql_result($result,$i,"wowrealm");
    $f8=mysql_result($result,$i,"xfire");
    $f10=mysql_result($result,$i,"xfirecheck");
    $f11=mysql_result($result,$i,"wowrating");
    ?>
    
    <tr>
    <td><font face="Arial, Helvetica, sans-serif"><?php echo "<center><img src=http://www.pvpstreams.com/table-images/wowtable.png>"; ?></center></font></td>
    <td><font face="Arial, Helvetica, sans-serif"><?php echo "<a class=blue href=http://$f4.battle.net/wow/en/character/$f7/$f1/simple>$f1</a>"; ?></font></td>
    <td><font face="Arial, Helvetica, sans-serif"><?php echo $f11; ?></font></td>
    <td><font face="Arial, Helvetica, sans-serif"><?php echo "$f10"; ?></font></td>
    <td><font face="Arial, Helvetica, sans-serif"><?php echo "<a class=blue href=http://www.pvpstreams.com/xfire.php?user=$f2>$f8</a>"; ?></font></td>
    <td><font face="Arial, Helvetica, sans-serif"><?php echo $f7; ?></font></td>
    <td><font face="Arial, Helvetica, sans-serif"><?php include("livestreamcheck.php"); ?></font></td>
    <td><font face="Arial, Helvetica, sans-serif"><?php echo "<a class=blue href=http://www.pvpstreams.com/livestream.php?user=$f2>$f3</a>"; ?></font></td>
    <td><font face="Arial, Helvetica, sans-serif"><?php echo "<img src=http://www.pvpstreams.com/wclassicons/$f5.png><img src=http://www.pvpstreams.com/wclassicons/$f6.png><img src=http://www.pvpstreams.com/wclassicons/$f9.png>" ?></font></td>
    </tr>
    
    
    <?php
    $i++;
    }
    ?>
    </table>

  2. #2
    Join Date
    Mar 2008
    Posts
    123
    Hey this will get you started. When you click on the button it will change the background of any rows whose first cell contains "asdf".

    Good luck!

    Code:
    <html>
    <head>
    <script>
    function killSomeRows(){
    	var table = document.getElementById("myTable");
    	var rows = table.getElementsByTagName("tr");
    	alert(rows.length);
    	var i=0;
    	var thisRow;
    	for(i=0;i<rows.length;i++){
    		thisRow = rows[i].getElementsByTagName("td");
    		if(thisRow[0].innerHTML=='asdf'){
    			rows[i].style.backgroundColor="#000000";
    		}
    	}
    }
    </script>
    </head>
    <body>
    herrow
    
    <table id="myTable" border="1">
    <tr>
        <td>test</td><td>1 test</td><td>test</td>
    </tr>
    <tr>
        <td>test</td><td>2 test</td><td>test</td>
    </tr>
    <tr>
        <td>asdf</td><td>3 test</td><td>test</td>
    </tr>
    <tr>
        <td>asdf</td><td>4 test</td><td>test</td>
    </tr>
    <tr>
        <td>test</td><td>5 test</td><td>test</td>
    </tr>
    </table>
    <button onclick="killSomeRows();">Go</button>
    </body>
    </html>

  3. #3
    Join Date
    Mar 2007
    Location
    Canada
    Posts
    99

  4. #4
    Join Date
    Mar 2011
    Posts
    13
    Thanks for the help and the useful javascript posted above, I will use that for users changing the background of the site and things in the future!

    Also lord the reason was that I plan to have other values in the field.

    I ended up deciding on using php to do the table thing I wanted, once again thanks for the kind help and it really helps!

  5. #5
    Join Date
    Apr 2011
    Posts
    2
    Can you reply with your php. I am trying to crossover to php from javascript to hide rows

    Thanks

  6. #6
    Join Date
    Mar 2011
    Posts
    13
    Quote Originally Posted by johntb View Post
    Can you reply with your php. I am trying to crossover to php from javascript to hide rows

    Thanks
    Example,
    This goes before table's row and of course values will change depending on what you want to hide, if value is 1 it will hide in this case.
    Code:
    <?php if($f1['name'] != "1") { ?>
    This goes after your row that you will hide
    Code:
    <?php } ?>

  7. #7
    Join Date
    Apr 2011
    Posts
    2
    you are gentleman and scholar... appreciate the prompt reply and you made it oh' so simple.
    Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles