Jump to content

javascript table row limit

yhc731

By yhc731
in JavaScript

Recommended Posts

yhc731 Newbie

yhc731

Posted
Posted

Hi, So I'm technically new to the w3schools forum, but I've been using the w3schools site since my junior year in college, its been 3 years. Straight to the problem. I am loading an XML in to a javascript created table, nearly identical to the one found on the w3schools website here,http://www.w3schools.com/xml/tryit.asp?filename=tryxml_appI have everything working, xml loads fine and the onclick works fine. Now what I want to do is limit the amount of rows in the table display. In my case its an XML of over 100 courses and I want to limit the number of rows that are shown in the HTML so that the page is not ridiculously long. Below is the HTML code that I have up. The javascript link is just a javascript sheet with the w3school javascript code in 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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document</title><script type="text/javascript" src="js/xml_reader.js"></script></head><body><div id = "site_wrapper">    <div id = "banner"></div>	<div id = "content_wrapper">                        <div id='showCourse'>Click on a CD to display album information.</div><br />              	<div style = "float:left">        <script type="text/javascript">        document.write("<table width = '300px' height = '75%' border='1'>");        for (var i=0;i<x.length;i++)          {           document.write("<tr onclick='displayCourseInfo(" + i + ")' align = 'center' >");          document.write("<td>");          document.write(x[i].getElementsByTagName("COURSE_NUMBER")[0].childNodes[0].nodeValue);          document.write("</td><td>");          document.write(x[i].getElementsByTagName("COURSE_TITLE")[0].childNodes[0].nodeValue);          document.write("</td></tr>");          }        document.write("</table>");				        </script>       </div>        	</div></div></body></html>

Javascript

if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.open("GET","./xml/courses.xml",false);xmlhttp.send();xmlDoc=xmlhttp.responseXML; x=xmlDoc.getElementsByTagName("COURSE");function displayCourseInfo(i){coursenumber=(x[i].getElementsByTagName("COURSE_NUMBER")[0].childNodes[0].nodeValue);coursetitle=(x[i].getElementsByTagName("COURSE_TITLE")[0].childNodes[0].nodeValue);coursedescription=(x[i].getElementsByTagName("COURSE_DESCRIPTION")[0].childNodes[0].nodeValue);coursereq=(x[i].getElementsByTagName("COURSE_REQ")[0].childNodes[0].nodeValue);txt="Course Number: "+coursenumber.bold()+"<br />Course Title: "+coursetitle+"<br />Course Description: "+coursereq+"<br />"+coursedescription  ;document.getElementById("showCourse").innerHTML=txt;}

Any and all help is appreciated.

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted
Javascript
x=xmlDoc.getElementsByTagName("COURSE");

this is why it's displaying all the rows, because you are asking it for all elements with that tag name (however many that may be) which is returned as an array, and then setting it's length property as the end condition in the for loop, which is displaying all the records.
for (var i=0;i<x.length;i++){  ...}

changing it so it is dynamic is tricky (as most solutions of this nature would involve pagination), depending on experience, but if you were to simply replace x.length with an integer than that would be the new end condition.

Link to comment
Share on other sites
yhc731 Newbie

yhc731

Posted
  • Author
Posted

Ahh, ok I was changing the value of i before and I don't know why.Another question would be how can I port the rest of my XML content to a table next to the current table. I'm not trying to create a new table but have the content of 1 XML side-by-side. Understand or am I being to confusing? Say I have 14 courses and i want to break the 14 courses in to two tables 7 and 7 because I don't want my page be really long and have a large white space on the right.

Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
Ahh, ok I was changing the value of i before and I don't know why.Another question would be how can I port the rest of my XML content to a table next to the current table. I'm not trying to create a new table but have the content of 1 XML side-by-side. Understand or am I being to confusing? Say I have 14 courses and i want to break the 14 courses in to two tables 7 and 7 because I don't want my page be really long and have a large white space on the right.
Maybe it would work better if you put the table inside a scrolling div?
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted
Ahh, ok I was changing the value of i before and I don't know why.Another question would be how can I port the rest of my XML content to a table next to the current table. I'm not trying to create a new table but have the content of 1 XML side-by-side. Understand or am I being to confusing? Say I have 14 courses and i want to break the 14 courses in to two tables 7 and 7 because I don't want my page be really long and have a large white space on the right.
i is a value that is being incremented by the for loop, and is being used to access (incrementally) each index within the x array. a good read through the javascript tutorials should help you make more sense of this, as it will have a significant role in the next question you asked.In order to break up the tables, you will have to add extra control structures to your loop in order to allow for the loop to know when to create a new table (in this case after 7 rows). It would also be best to employ some CSS so that you can assign each table some styles so that can ensure the tables appear next to each other, instead of below each other.
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted
Maybe it would work better if you put the table inside a scrolling div?
ShadowMage is eating his Wheaties this morning. Good call on the scrolling div.
Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
I thought about the scrolling div, but I'd rather have all the content out there rather than someone looking at a portion of a div at a time. What exactly can I write in the loop to break it up after a x amount of rows?
I kinda see your point, but I don't know if I'd go with the 'side x side tables' solution either. If you have a lot of data, that's going to create a lot of tables, which is going to make the page stretch horizontally, which personally I find far more annoying than a really long vertically scrolling page. I think a scrolling div or pagination script would be best, but that's just me.
Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
Well I'm not looking for a long line of tables across either, more of two columns with tables displaying the content of the XML.
Ah, ok I think I see what you're looking for.You should move your document.write statements for the table inside the loop and then check the value of i%10 (or whatever value for you want instead of 10) and if it's 0 print the table end and a new start so:
document.write("<table width = '300px' height = '75%' border='1'>");for (var i=0;i<x.length;i++){   if ((i%10 == 0) && (i != 0)) //Will print 10 rows then create a new table   {	  document.write("</table>");	  document.write("<table width = '300px' height = '75%' border='1'>");   }   document.write("<tr onclick='displayCourseInfo(" + i + ")' align = 'center' >");   document.write("<td>");   document.write(x[i].getElementsByTagName("COURSE_NUMBER")[0].childNodes[0].nodeValue);   document.write("</td><td>");   document.write(x[i].getElementsByTagName("COURSE_TITLE")[0].childNodes[0].nodeValue);   document.write("</td></tr>");}document.write("</table>");

You might have to set the display to inline for the tables though.EDIT: Added a conditional to check for the first time through the loop (if i is 0) otherwise you'll get an empty table.

Link to comment
Share on other sites
yhc731 Newbie

yhc731

Posted
  • Author
Posted
Ah, ok I think I see what you're looking for.You should move your document.write statements for the table inside the loop and then check the value of i%10 (or whatever value for you want instead of 10) and if it's 0 print the table end and a new start so:
document.write("<table width = '300px' height = '75%' border='1'>");for (var i=0;i<x.length;i++){   if ((i%10 == 0) && (i != 0)) //Will print 10 rows then create a new table   {	  document.write("</table>");	  document.write("<table width = '300px' height = '75%' border='1'>");   }   document.write("<tr onclick='displayCourseInfo(" + i + ")' align = 'center' >");   document.write("<td>");   document.write(x[i].getElementsByTagName("COURSE_NUMBER")[0].childNodes[0].nodeValue);   document.write("</td><td>");   document.write(x[i].getElementsByTagName("COURSE_TITLE")[0].childNodes[0].nodeValue);   document.write("</td></tr>");}document.write("</table>");

You might have to set the display to inline for the tables though.EDIT: Added a conditional to check for the first time through the loop (if i is 0) otherwise you'll get an empty table.

You sir, are a genius. It's working just the way I wanted to. Now its the cosmetics that needs a little taking care of. I've never really used Javascript, but I can CSS you the Great Wall of China. How touchy is Javascript with divs and such, I was able to apply the " style = 'display:inline' " when creating the table. Can I call IDs in to the <table>?**EDIT**Nevermind, I trial and error it. Thanks everyone who provided a suggestion or answer.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...