tech.b,
I don't know if this helps but I do have my table working and can get data back out. My table allows for a visitor to the site to add and delete rows. A row is x number of cells each with an input tag in the cell so that I can reference the data the user has entered into the cell. So I dynamically build the table as follows:
//A button on my form triggers this function
function addRow() {
//add a row to the rows collection and get a reference to the newly added row
noRows = noRows+1; //I use this elsewhere so it's really just a convenience
var newRow = document.getElementById("mytbl").insertRow(-1);
//add cells (<td>) to the new row with a unique tag and set the innerHTML to contain text boxes
var oCell = newRow.insertCell(-1);
//create a button in the row that will allow the user to delete the row
oCell.innerHTML = "<input type='button' value='x' onclick='removeRow(this);'/>";
//in my case, I have a static number (known) rows
for (c=1; c<8; c++) {
//I build an id for the input tag for the cell
tag = "t"+noRows.toString()+c.toString(); //could just as easily be a tag "r1c1"
oCell = newRow.insertCell(-1);
oCell.innerHTML = "<input type='text' id='"+tag+"' />";
}
}
//triggered when user clicks the "x" button in a row
function removeRow(src){
/* src refers to the input button that was clicked.
to get a reference to the containing <tr> element,
get the parent of the parent (in this case <tr>)
*/
var oRow = src.parentNode.parentNode;
//once the row reference is obtained, delete it passing in its rowIndex
document.getElementById("acatdog").deleteRow(oRow.rowIndex);
noRows = noRows-1;
}
Then, later, when I need to access that data, I do the following and build it essentially into a string (I need to print the contents of the whole thing into a form results email) but instead you could build a dynamic array:
function deconstruct() {
// string together rows from mytbl into myformstring
// flag used because this function is called from inside a validation routine and I
// want to be sure that for each row, the user supplied 'some' data
valid_tbl = true;
myformstring = "";
for (r=1; r <= noRows; r++) {
for (c=1; c<8; c++) {
tag="t"+r+c;
obj=document.getElementById(tag);
cellval=obj.value;
if ((cellval.length < 1) && valid_tbl == true) {
alert("Please provide data for all columns in the table.");
valid_tbl = false; }
else {
if (c == 7) myformstring = myformstring+cellval+"\n";
else myformstring = myformstring+cellval+"\t"; }
}
}
//if the user completed the entire table then I have my string which will be
//be assigned to a form field for display in my form results; otherwise, a null
//string tells the calling function that the user didn't complete the table and
//returns a false on the validation routine
if (valid_tbl == false) myformstring = "";
return myformstring;
}
Some of the above was provided by fxm in the first place so thanks to him for all his help.
In any event, you could simply declare an array and loop through the table as above but instead:
//since my code is all dynamic building of objects...loop through your rows
colarray = "[";
colarray = colarray+cellval+","; // for each cell in the row putting quotes around text values and not adding a comma after the last value...then
colarray = colarray+"]";
//once you've gotten all your cell data then add the entire row to a row array to
//simulate a multi-dimensional array
rowarray = [colarray];
I haven't tested this but the solution will be something like the above. Does that help?
