How to get the data of a table from the first to the last row with a JavaScript

I have a table dynamically created with a JavaScript (insertRow, deleteRow).
At the end I'd like to go through the whole table (beginning at the first
and ending at the last row) to display all the data e.g. with alert().
Is there an easy way to go through the whole table to read the data (each
row has an unique ID but I don't know their IDs) or do I need while
modifying the table to rememder each row's ID so I can access to data
directly with their IDs?

Stefan

re: How to get the data of a table from the first to the last row with a JavaScript

Stefan Mueller wrote:[color=blue]
> I have a table dynamically created with a JavaScript (insertRow, deleteRow).
> At the end I'd like to go through the whole table (beginning at the first
> and ending at the last row) to display all the data e.g. with alert().
> Is there an easy way to go through the whole table to read the data (each
> row has an unique ID but I don't know their IDs) or do I need while
> modifying the table to rememder each row's ID so I can access to data
> directly with their IDs?[/color]

Presumably you have a reference to the table. I'm not sure it's wise to
blast it all into an alert, there's a good chance you can't see it all.

The following just requires a reference to the table, nothing more (oh,
and support for the rows and cells collections):

function showTableContent(theTable)
{
var content=[];
var row, cell;
if (!theTable.rows || !theTable.rows[0].cells) return;
for (var i=0, rlen=theTable.rows.length; i<rlen; ++i){
row = theTable.rows[i];
for (var j=0, clen=row.cells.length; j<clen; ++j){
content.push('row ' + i +' cell ' + j + ': '
+ getElText(row.cells[j]));
}
}
alert(content.join('\n'));
}

function getElText(el)
{
if (el.textContent) return el.textContent;
if (el.innerText) return el.innerText;
var x = el.childNodes;
var txt = '';
for (var i=0, len=x.length; i<len; ++i){
if (3 == x[i].nodeType) {
txt += x[i].data;
} else if (1 == x[i].nodeType){
txt += getElText(x[i]);
}
}
return txt.replace(/\s+/g,' ');
}



--
Rob

re: How to get the data of a table from the first to the last row with a JavaScript

Great, I really get the number of rows of the table 'MyTable' which is
located on the second frame
var table = parent.frames[1].document.getElementById("MyTable")
alert (table.rows.length)

The number of cells in the row 'i' I get with
alert (table.rows[i].cells.length)

The information about my hidden text fields (e.g. <input id="MyRow_0"
name="MyRow_0" type="hidden">) which are located in the table (only one
column -> cells[0]) I get with
alert (table.rows[i].cells[0].innerHTML)

But how can I read the content of my hidden text fields?

The following command shows only an empty alert box
alert (table.rows[i].cells[0].textContent)
and
alert (table.rows[i].cells[0].innerText)
says 'undefined'.

Stefan

re: How to get the data of a table from the first to the last row with a JavaScript

Stefan Mueller wrote:[color=blue]
> Great, I really get the number of rows of the table 'MyTable' which is
> located on the second frame
> var table = parent.frames[1].document.getElementById("MyTable")
> alert (table.rows.length)
>
> The number of cells in the row 'i' I get with
> alert (table.rows[i].cells.length)
>
> The information about my hidden text fields (e.g. <input id="MyRow_0"
> name="MyRow_0" type="hidden">) which are located in the table (only one
> column -> cells[0]) I get with
> alert (table.rows[i].cells[0].innerHTML)
>
> But how can I read the content of my hidden text fields?
>
> The following command shows only an empty alert box
> alert (table.rows[i].cells[0].textContent)
> and
> alert (table.rows[i].cells[0].innerText)
> says 'undefined'.[/color]

Then you need a modified 'getElText' function, you may need to add logic
to deal with other element types and the various elements within each:


function getElText(el)
{
var x, nodes = el.childNodes;
var txt = '';
for (var i=0, len=nodes.length; i<len; ++i){
x = nodes[i]
if (3 == x.nodeType) {
txt += x.data;
} else if (1 == x.nodeType){
if ('input' == x.nodeName.toLowerCase()){
txt += x.value;
} else {
txt += getElText(x);
}
}
}
return txt;
}



Interface Node - node types
Element types:
ELEMENT_NODE = 1
ATTRIBUTE_NODE = 2
TEXT_NODE = 3
CDATA_SECTION_NODE = 4
ENTITY_REFERENCE_NODE = 5
ENTITY_NODE = 6
PROCESSING_INSTRUCTION_NODE = 7
COMMENT_NODE = 8
DOCUMENT_NODE = 9
DOCUMENT_TYPE_NODE = 10
DOCUMENT_FRAGMENT_NODE = 11
NOTATION_NODE = 12


--
Rob

re: How to get the data of a table from the first to the last row with a JavaScript

Your code works perfekt!

Many thanks
Stefan