Skip to main content
W
w424637
Known Participant
December 10, 2009
Question

Use Javascript to show hide table rows

  • December 10, 2009
  • 1 reply
  • 4439 views

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

This topic has been closed for replies.

1 reply

W
w424637Author
Known Participant
December 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>
W
w424637Author
Known Participant
December 10, 2009

<!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>
David_Powers
David_Powers
Inspiring
December 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>
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices