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

[Stefan Mueller]

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

 

[RobG]

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?

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;
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.nodeType) {
txt += x.data;
} else if (1 == x.nodeType){
txt += getElText(x);
}
}
return txt.replace(/\s+/g,' ');
}

 

[Stefan Mueller]

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.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.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.cells[0].textContent)
and
alert (table.rows.cells[0].innerText)
says 'undefined'.

Stefan

 

[RobG]

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.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.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.cells[0].textContent)
and
alert (table.rows.cells[0].innerText)
says 'undefined'.

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
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

 

[Stefan Mueller]

Your code works perfekt!

Many thanks
Stefan