Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts

    How to display certain rows ?

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

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,465
    Thanks
    3
    Thanked 494 Times in 481 Posts
    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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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