How to display certain rows ?

azrina · 03-06-2013, 01:43 PM

Hi,

I dont know how to code to display a certain rows dynamically depending on user's selection. The scenario is like this; when user select value 3, track that having value 3 will be displayed.

My rows are created using innerHTML. I dont have idea how to work around with this code. Pls help.

HTML code:

Code:

<body >
<p>Table of Contents</p>
View by Track: 
<select>
  <option value="0">--Choose--</option>
  <option value="1">1-XX</option>
  <option value="2">2-XX</option>
  <option value="3">3-XX</option>
  <option value="4">4-XX</option>
  <option value="5">5-XX</option>  
</select>
</p>
<table border="1" >
  <tr>
    <th>Ref. No.</th>
	<th>Track</th>
    <th>Title</th>
  </tr>
  <tbody id="CONTENT"><div id="SHOW"></div>
  <script type="text/javascript">
  createRows('SHOW');
</script>
  </tbody>
</table>
</body>

JavaScript code:

Code:

function createRows() //to create rows using innerHTML
{
	var tbody = document.getElementById("CONTENT"); //tbody = your table body
	tbody.innerHTML = ""; //empty table body
	for (i=1; i<=73; i++)  
	{
		tr = tbody.insertRow(-1); //append a row in table body
		td = tr.insertCell(-1); td.innerHTML = referenceNo(i); //ref. no
		td = tr.insertCell(-1); td.innerHTML = trackNo(i);  //track
		td = tr.insertCell(-1); td.innerHTML = getTitle(i); //title and link
	}
}

vwphillips · 03-06-2013, 05:09 PM

Code:

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/
function createRows() //to create rows using innerHTML
{
	var tbody = document.getElementById("CONTENT"); //tbody = your table body
	for (var tr,td,i=1; i<=73; i++)
	{
		tr = document.createElement('TR'); //append a row in table body
        tbody.appendChild(tr)
		td = tr.insertCell(-1); td.innerHTML = 'referenceNo(i)'; //ref. no
		td = tr.insertCell(-1); td.innerHTML = Math.floor(Math.random()*5+1);  //track
		td = tr.insertCell(-1); td.innerHTML = 'getTitle(i)'; //title and link
	}
}

function SortRows(v,id){ //to create rows using innerHTML
 var tbody = document.getElementById(id),o=SortRows[id],trs,z0;
 if (tbody){
  if (!o){
   trs=tbody.getElementsByTagName('TR');
   o=SortRows[id]=[];
   for (z0=0;z0<trs.length;z0++){
    o[z0]=trs[z0];
   }
  }
  if (o) {
   while (tbody.firstChild){
    tbody.removeChild(tbody.firstChild);
   }
   for (z0=0;z0<o.length;z0++){
    if (o[z0].getElementsByTagName('TD')[1].innerHTML==v){
     tbody.appendChild(o[z0]);
    }

   }
  }
 }
}

/*]]>*/
</script></head>

<body>
<p>Table of Contents</p>
View by Track:
<select onchange="SortRows(this.value,'CONTENT');">
  <option value="0">--Choose--</option>
  <option value="1">1-XX</option>
  <option value="2">2-XX</option>
  <option value="3">3-XX</option>
  <option value="4">4-XX</option>
  <option value="5">5-XX</option>
</select>
</p>
<table border="1" >
  <tr>
    <th>Ref. No.</th>
	<th>Track</th>
    <th>Title</th>
  </tr>
  <tbody id="CONTENT"><div id="SHOW"></div>
  </tbody>
</table>
  <script type="text/javascript">
  createRows('SHOW');
</script>
</body>

</html>