Jangrina Posted March 6, 2013 Share Posted March 6, 2013 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. <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> function createRows() //to create rows using innerHTML{var tbody = document.getElementById("CONTENT"); //tbody = your table bodytbody.innerHTML = ""; //empty table bodyfor (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}} Link to comment Share on other sites More sharing options...
justsomeguy Posted March 6, 2013 Share Posted March 6, 2013 Just add an if statement into your for loop to check for the condition you're looking for before creating the row. If you want to test trackNo, then get the trackNo first for that row and use an if statement to check if it's the correct number. You'll also need to add a handler for your select element so that when the value changes it runs the createRows function, and the createRows function can get the selected value from the select element to see which rows to show. Link to comment Share on other sites More sharing options...
Jangrina Posted March 6, 2013 Author Share Posted March 6, 2013 Can I create a new function? I want createRows does its function to display all the rows. Link to comment Share on other sites More sharing options...
Jangrina Posted March 6, 2013 Author Share Posted March 6, 2013 (edited) Try to put a filter in for loop. If select option is 0, it will display all the data.I code like below. But all the data were not displayed at all. Why? <body ><p>Table of Contents</p>View by Track:<select id="TRACK" onchange="createRows()"> <option value="0">--Choose--</option> <option value="1">1-Islamic Finance</option> <option value="2">2-Accounting</option> <option value="3">3-Management & Marketing</option> <option value="4">4-Finance & Economic</option> <option value="5">5-Business</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> function createRows() //to create rows using innerHTML{var tbody = document.getElementById("CONTENT"); //tbody = your table bodytbody.innerHTML = ""; //empty table body for (i=1; i<=73; i++) { if (document.getElementByID("TRACK").selectedIndex == 0 ) { 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 } }} Edited March 6, 2013 by Jangrina Link to comment Share on other sites More sharing options...
justsomeguy Posted March 6, 2013 Share Posted March 6, 2013 You capitalized the "D" in Id. Make sure to check your Javascript error console, it will show error messages like that. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now