Best way to access a 64X5 table for updating HTML with JS?

@John_BarleycornJan 28.2005

I have a dataset I need to use to update values in an HTML table with javascript but I’m not sure what the best way to access the values in the dataset would be.

I thought I should try to load them into a two-dimensional array but I’m not certain how I would read the values into the array when the page loads. I can put the values into pretty much any type of table or delimited text file.

An example of the dataset:

101 1.2 1.3 1.4 null
102 1.3 1.4 1.5 null
103 1.6 1.7 null null

The dataset has 65 rows and will be needed for an onChange() event in the HTML. When a value in a certain input is changed on the page I would like to look at the dataset and use the value entered into the input to extract a value from the dataset which will be used to update the HTML.

I understand that javascript doesn’t support multidimensional arrays but I’ve found a lot of examples of people simulating them by nesting arrays within arrays, I was hoping to be able to do something similar to hold the dataset. This dataset isn’t very big so I considered simply writing it out in the script but I’m not sure how I would use it like that. I was hoping I could use some sort of read line routine to iterate through a text file and read the values into an array. If not from an external file then is there a way to include the values from the dataset in the script section and read them into an array when the page loads?

Please let me know if my thinking is completely off-base and there is a different way of accomplishing this. If this sounds like a reasonable approach I could really use some suggestions on how to read the data into the array when the page loads. I’m fairly new to javascript and haven’t tried accessing external files or anything so please excuse my ignorance. Thanks in advance for any help.

to post a comment

JavaScript

5 Comments(s) _↴

@Warren86Jan 28.2005 — #<HTML>

<Head>

<Script Language=JavaScript>

var dataArray = new Array();
 
  function init(){
 
   nRows = document.getElementsByTagName('TR');
   nCells = nRows[0].cells.length;
   lastCell = nRows.length*nCells;
   isCell = 0;
   for (i=0; i<nRows.length; i++)
   {
   for (n=0; n<nCells; n++)
   {nRows[i].cells[n].id = isCell++}
   }
   for (i=0; i<lastCell; i++)
   {dataArray[i] = document.getElementById(i).innerHTML}
   alert(dataArray);
  }
 
  window.onload=init;

</Script>

</Head>

<Body>

<Table width='300' cellspacing='0' id='isData'>

<TR>

<TD>101</TD>

<TD>1.2</TD>

<TD>1.3</TD>

<TD>1.4</TD>

<TD>null</TD>

</TR>

<TR>

<TD>102</TD>

<TD>1.3</TD>

<TD>1.4</TD>

<TD>1.5</TD>

<TD>null</TD>

</TR>

<TR>

<TD>103</TD>

<TD>1.6</TD>

<TD>1.7</TD>

<TD>null</TD>

<TD>null</TD>

</TR>

</Table>

</Body>

</HTML>

@Warren86Jan 28.2005 — #The above code is edited to work with a particular table, in this case, id='isData'

<HTML>

<Head>

<Script Language=JavaScript>

var dataArray = new Array();
 
  function init(){
 
   nRows = document.getElementById('isData').getElementsByTagName('TR');
   nCells = nRows[0].cells.length;
   lastCell = nRows.length*nCells;
   isCell = 0;
   for (i=0; i<nRows.length; i++)
   {
   for (n=0; n<nCells; n++)
   {nRows[i].cells[n].id = isCell++}
   }
   for (i=0; i<lastCell; i++)
   {dataArray[i] = document.getElementById(i).innerHTML}
   alert(dataArray);
  }
 
  window.onload=init;

@John_BarleycornauthorJan 28.2005 — #Thanks for the response Warren, that helps me understand how I would use nested arrays to hold the data and that would work great to read values from the page into an array however I'm not reading the data in from the HTML table. I don't want to show the entire dataset rather use it to populate/change a value in an input field on the page.

If the value in one text input element changes, I need to send that value along with one other value from a different input field to a function and use them to retreive a value from the dataset which will then be placed in a different field. So if a person enters 101 in the field an onChnage event calls a function which takes the value they entered (101) and another value and uses those two values to read a third value from the dataset and updates a third input field on the page with the value read from the dataset.

@Warren86Jan 28.2005 — #To be candid, you expect far too much from mere volunteers.

Anyone who posts a response to your thread is just that, and nothing more.

To be brutally candid, open your checkbook, and find someone locally to generate the code you need.

I don't believe that anyone who regularly participates here as a respondent, considers him or herself to be anyone's personal code generating factory.

@John_BarleycornauthorJan 28.2005 — #Thanks again for trying, sorry if I somehow implied that I expected anyone to be my 'personal code generating factory'. I was merely hoping somone had done something like this before and would be willing to share their solution.

Also, my response to your suggestion was an attempt to clarify what I am trying to do, as I said I am new to javascript and programming in general and am having trouble understanding how to go about accomplishing this. I have no problems with digging through some different websites to find code examples and modifying it to suit if I know what I'm looking for. I've spent the better part today trying to figure out how to do this and after having looked at literally dozens of different sites I decided to post on a forum and ask for some help.

Once again I apologize if my post made it sound as though I am asking for handouts.

Also in #JavaScript _↴

dinamic buttons Adding active styles to subtab items Google Maps and Possible Firefox Memory Leaks

Success!

Help @John_Barleycorn spread the word by sharing this article on Twitter...

Tweet This

Best way to access a 64X5 table for updating HTML with JS?

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Best way to access a 64X5 table for updating HTML with JS?

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴