?
Solved

dynamically populate HTML table using JavaScript

Posted on 2003-03-25
8
Medium Priority
?
617 Views
Last Modified: 2012-06-27
I have a combo box with a list of Project names. Than I have a JavaScript array with details about those projects. The array looks like this:

aUpdates[1] = '1~82~3/15/2003~Initial stage. Project Created';
aUpdates[2] = '2~82~3/21/2003~Project has been reviewed by the Development team';
aUpdates[28] = '3~82~3/24/2003~Moved through this stage';
aUpdates[29] = '4~82~3/24/2003~Moved through this stage';
aUpdates[36] = '5~82~3/24/2003~Moved';
aUpdates[37] = '6~82~3/24/2003~Moved through this stage';
aUpdates[38] = '7~82~3/24/2003~Moved through this stage';
aUpdates[39] = '8~82~3/24/2003~Moved';
aUpdates[40] = '8~82~3/25/2003~this is a test';

This array is pre-loaded from database. Each of the array elements represent a row in a database table. If you split each of the array elements by "~" you'll get my field values. The second value, in this example it's "82", represents ID of the Project in my Combo Box.

I also have HTML table that I want to use to populate with Project information from this array. I need this table to dynamically populate when I select a value from the Combo box. If a selected combo box value does not have any details within the array, I need to hide this table. I can do this with ASP, but that means I need to reload the whole page. Is there any way to do this with JavaScript?

I don't mind changing my array as well if someone can tell me a better way of populating it to fit my purpose.

If possible, I need a piece of funcional code using the above example.
0
Comment
Question by:rtarna
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
8 Comments
 
LVL 10

Expert Comment

by:m8rix
ID: 8207244
What you wan't to do sounds very possible...
Can you post the code for your combo box so I can understand more what you are trying to do?
0
 
LVL 10

Expert Comment

by:m8rix
ID: 8207270
Is there anything between:
aUpdates[2]
and
aUpdates[28]?
0
 

Author Comment

by:rtarna
ID: 8207750
The combo is populated from an xml file with asp and below the code you'll find the xml file. And to answer your second question, no, there's nothing between aUpdates[2] and aUpdates[28]. Those are just RowIDs of the records.

=========================================================
<SELECT id=cboProjects style="FONT-SIZE: 8pt;" name=cboProjects onchange="javascript: GetProjectDetail(document.frmProjectDB, cboProjects.options[cboProjects.selectedIndex].value);">
<option value="0" selected></option>

<%
Set oXML = Server.CreateObject("Microsoft.XMLDOM")
oXML.validateOnParse = True
oXML.load(Server.MapPath("../Files/allProjects.xml"))
Set oRoot = oXML.documentElement
For intLoop = 0 to oRoot.childNodes.length - 1
  strTemp = "<option value="
  strTemp = strTemp & oRoot.childNodes.item   (intLoop).getAttribute("ID")
  strTemp = strTemp & ">"
  strTemp = strTemp & oRoot.childNodes(intLoop).childNodes (0).text
  strTemp = strTemp & "</option>"
                                   
  Response.Write strTemp
Next                        
                             
Set oXML = Nothing
%>                        
               
</SELECT>

=========================================================

<?xml version='1.0'?>
<PROJECTS>
 <PROJECT ID='98'>
     <PROJECT_NAME>Report1</PROJECT_NAME>
     <REQUESTOR_NAME>Sandy</REQUESTOR_NAME>
     <POPULATION>Site</POPULATION>
     <IMPACT>Provide a one access point for monitoring.</IMPACT>
     <SYSTEMS>Chronicle</SYSTEMS>
     <STATUS>OPEN</STATUS>
     <ASSIGNED_TO>mst</ASSIGNED_TO>
     <PROJ_START>3/10/2003</PROJ_START>
     <PROJ_END>3/21/2003</PROJ_END>
     <PRIORITYID>1</PRIORITYID>
     <PROJECT_CAT>2</PROJECT_CAT>
 </PROJECT>
 <PROJECT ID='97'>
     <PROJECT_NAME>Organizational Charts</PROJECT_NAME>
     <REQUESTOR_NAME>Shelly</REQUESTOR_NAME>
     <POPULATION>Site</POPULATION>
     <IMPACT>These are provided to the dept.</IMPACT>
     <SYSTEMS>TCS</SYSTEMS>
     <STATUS>OPEN</STATUS>
     <ASSIGNED_TO>Rta</ASSIGNED_TO>
     <PROJ_START>3/31/2003</PROJ_START>
     <PROJ_END>1/1/1900</PROJ_END>
     <PRIORITYID>1</PRIORITYID>
     <PROJECT_CAT>1</PROJECT_CAT>
 </PROJECT>
 <PROJECT ID='82'>
     <PROJECT_NAME>Support Staff</PROJECT_NAME>
     <REQUESTOR_NAME>Shelly</REQUESTOR_NAME>
     <POPULATION>Site</POPULATION>
     <IMPACT>TSC</IMPACT>
     <SYSTEMS>Staffing</SYSTEMS>
     <STATUS>OPEN</STATUS>
     <ASSIGNED_TO>rok</ASSIGNED_TO>
     <PROJ_START>3/3/2003</PROJ_START>
     <PROJ_END>3/13/2003</PROJ_END>
     <PRIORITYID>1</PRIORITYID>
     <PROJECT_CAT>1</PROJECT_CAT>
 </PROJECT>
</PROJECTS>
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 10

Accepted Solution

by:
m8rix earned 1000 total points
ID: 8208077
Ok for starters, do you really need to know the RowIDs of the records? If so It would be easier to delimit them with your "~" string.

I would sugest using sequenced numbers to fill the array. So perhaps when you are looping through to write the javascript array just incorporate a count so anyway have a look at the following exsample:
(You can expand on this code as I have made it very basic)

<html>
<head>
<title>
</title>
</head>
<script>
aUpdates = new Array();
aUpdates[1] = '1~82~3/15/2003~Initial stage. Project Created';
aUpdates[2] = '2~82~3/21/2003~Project has been reviewed by the Development team';
aUpdates[3] = '3~82~3/24/2003~Moved through this stage';
aUpdates[4] = '4~82~3/24/2003~Moved through this stage';
aUpdates[5] = '5~82~3/24/2003~Moved';
aUpdates[6] = '6~82~3/24/2003~Moved through this stage';
aUpdates[7] = '7~82~3/24/2003~Moved through this stage';
aUpdates[8] = '8~82~3/24/2003~Moved';
aUpdates[9] = '8~82~3/25/2003~this is a test';

function updatetable(projectnumber){
var tabletext = "<table>";
projecttable.innerHTML = "<table>";
for (var x=1; x<aUpdates.length; x++)
     {
     var splitstring=aUpdates[x].split("~");
     if (splitstring[1] == projectnumber)
          {
          tabletext = tabletext + "<tr><td>" + splitstring[0] + "</td><td>" + splitstring[1] + "</td><td>" + splitstring[2] + "</td><td>" + splitstring[3] + "</td></tr>";
          }
     }
tabletext = tabletext + "</table>";
projecttable.innerHTML = tabletext;
}
</script>
<body>
<form name="formname">
  <select name="select1"  onChange="updatetable(formname.select1.options[formname.select1.selectedIndex].value)">
    <option value="81">Report1</option>
    <option value="82">Organizational Charts - 82</option>
    <option value="67">Support Staff</option>
    <option value="22">Project Name</option>
  </select><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2">
</form>
<span id="projecttable" name="projecttable">
</span>
</body>
</html>
0
 
LVL 10

Expert Comment

by:m8rix
ID: 8208111
Oops..

You can delete line 20:
projecttable.innerHTML = "<table>";

While your at it replace the array with this:

aUpdates = new Array();
aUpdates[1] = '1~82~3/15/2003~Initial stage. Project Created';
aUpdates[2] = '2~82~3/21/2003~Project has been reviewed by the Development team';
aUpdates[3] = '3~82~3/24/2003~Moved through this stage';
aUpdates[4] = '4~82~3/24/2003~Moved through this stage';
aUpdates[5] = '5~82~3/24/2003~Moved';
aUpdates[6] = '6~82~3/24/2003~Moved through this stage';
aUpdates[7] = '7~22~3/24/2003~Moved through this stage';
aUpdates[8] = '8~82~3/24/2003~Moved';
aUpdates[9] = '8~82~3/25/2003~this is a test';
aUpdates[10] = '8~22~3/25/2003~this is a test';
aUpdates[11] = '1~67~3/15/2003~Initial stage. Project Created';
aUpdates[12] = '2~22~3/21/2003~Project has been reviewed by the Development team';
aUpdates[13] = '3~81~3/24/2003~Moved through this stage';
aUpdates[14] = '4~81~3/24/2003~Moved through this stage';
aUpdates[15] = '5~81~3/24/2003~Moved';
aUpdates[16] = '6~81~3/24/2003~Moved through this stage';
aUpdates[17] = '7~81~3/24/2003~Moved through this stage';
aUpdates[18] = '8~81~3/24/2003~Moved';
aUpdates[19] = '8~67~3/25/2003~this is a test';

(this will give you a better understanding of what I have done)  :-) good luck

Regards
0
 

Author Comment

by:rtarna
ID: 8210725
Thank you. That's exactly what I needed.
I do need to use the RowIDs because they are used as links from my dynamic table.
I just had to modify the code a little to do some other things as well.
0
 

Author Comment

by:rtarna
ID: 8210739
That's exaclty what I needed. Thanks.
0
 
LVL 10

Expert Comment

by:m8rix
ID: 8214222
No worries...

Happy programing :o)
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question