Use Javascript to show hide table rows

Report · Dec 10, 2009

Hi

I have a query which outputs 9 rows:

A 10

A 11

A 12

B 21

B 22

B 23

C 31

C 32

C 33

I have put these in a table in the usual way using repeat region etc.

I also have built a select box that has A B C.

I would like to know how to use javascript to show and hide the rows of my report dependant on the choice made.

ie User chooses A and only the rows with A in the first field are shown etc. Without going back and requering the server.

Can this be done?

Any help or pointers would be very welcome

thanks
Simon

Report · Dec 10, 2009

I have made a start on this but not sure hwo to prgress it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<html>
<script src="SpryAssets/SpryValidationSelect.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css" />
<head>

<script>
function toggle() {
 if( document.getElementById("hidethis").style.display=='none' ){
   document.getElementById("hidethis").style.display = '';
 }else{
   document.getElementById("hidethis").style.display = 'none';
 }
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <span id="spryselect1">
  <label>hh
    <select onchange="toggle();" name="hh" id="hh">
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
  </label>
  <span class="selectRequiredMsg">Please select an item.</span></span>
</form>

<table border="1">
<tr id="hidethis">
<td>A</td>
</tr>
<tr id="hidethis">
<td>B</td>
</tr>
<tr id="hidethis">
<td>C</td>
</tr>
</table>
<script type="text/javascript">
<!--
var spryselect1 = new Spry.Widget.ValidationSelect("spryselect1");
//-->
</script>
</body>
</html>
</html>

Report · Dec 10, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Report · Dec 10, 2009

One problem with your attempt so far is the use of the same ID on multiple elements. An ID must be unique. It can be used only once on the same page.

Rather than struggle with writing all of the JavaScript yourself, I recommend that you use a JavaScript library like jQuery to do a lot of the hard work for you. The following does what you want (it requires the jQuery library from http://jquery.com/):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Toggle Rows</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function() {
  // when the page loads, show rows with A in the first cell
  // hide rows that contain anything else in the first cell
  $('#displayTable td:first-child:contains("A")').parent().show();
  $('#displayTable td:first-child').not(':contains("A")').parent().hide();
  // create the onchange event handler for the drop-down menu
  // this gets the selected value and shows rows that contain it in the first cell
  // other rows are hidden
   $('#hh').change(function() {
    var selval = $('#hh').val();
    $('#displayTable td:first-child:contains("' + selval + '")').parent().show();
    $('#displayTable td:first-child').not(':contains("' + selval + '")').parent().hide();
  });
});
</script>
</head>

<body>
<form id="form1" name="form1" action="">
  <label for="hh">Select a value</label>
  <select name="hh" id="hh">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
</form>
<p> </p>
<table width="200" id="displayTable">
  <tr>
    <td>A</td>
    <td>10</td>
  </tr>
  <tr>
    <td>A</td>
    <td>11</td>
  </tr>
  <tr>
    <td>A</td>
    <td>12</td>
  </tr>
  <tr>
    <td>B</td>
    <td>21</td>
  </tr>
  <tr>
    <td>B</td>
    <td>22</td>
  </tr>
  <tr>
    <td>B</td>
    <td>23</td>
  </tr>
  <tr>
    <td>C</td>
    <td>31</td>
  </tr>
  <tr>
    <td>C</td>
    <td>32</td>
  </tr>
  <tr>
    <td>C</td>
    <td>33</td>
  </tr>
</table>
</body>
</html>

Use Javascript to show hide table rows

Photos