innerHTML for a table row problem

[google]

I am having trouble with the following function that I am modifying
from www.isocra.com. I am trying to change the ID of a hidden form
object inside a table row. I have used alert() to test where it breaks
and it seems to be on the last line of the function where I am trying
to place the new text back into the table row. Anyone any ideas where
I a going wrong as I'm not a great Javascript coder.

Thanks in advance.

this.onDrop = function(table, droppedRow) {
var rows = table.tBodies[0].rows;
var rowsCount = parseInt(rows.length);

for (var x = 0; x <= rowsCount - 1; x++)
{
//Get string contents of row
var curRowString = rows[x].innerHTML;

//Find where ID tag is
var IDStart = curRowString.indexOf("ID");

//Find > immediately after ID tag
var IDEnd = curRowString.indexOf(">", IDStart);

//Get ID value
var IDVal = curRowString.substring(IDStart+5,IDEnd)

//Replace old ID with new ID
var oldID = "ID" + IDVal;
var newID = "ID" + (x+1);
var newRowString = curRowString.replace(oldID, newID);

//*********** Crashes on line below ***************
rows[x].innerHTML = newRowString;
}
}

 

[RobG]

I am having trouble with the following function that I am modifying
fromwww.isocra.com. I am trying to change the ID of a hidden form
object inside a table row. I have used alert() to test where it breaks
and it seems to be on the last line of the function where I am trying
to place the new text back into the table row. Anyone any ideas where
I a going wrong as I'm not a great Javascript coder.

Thanks in advance.

this.onDrop = function(table, droppedRow) {
var rows = table.tBodies[0].rows;

If you want all the rows in the table, consider using the table's rows
collection:

var rows = table.rows;

var rowsCount = parseInt(rows.length);

rows.length is defined as a number, there is no need for parseInt
unless you know of some broken implementations that need it.

for (var x = 0; x <= rowsCount - 1; x++)

Why not:

for (var x = 0; x < rowsCount; x++)

{
//Get string contents of row
var curRowString = rows[x].innerHTML;

//Find where ID tag is
var IDStart = curRowString.indexOf("ID");

//Find > immediately after ID tag
var IDEnd = curRowString.indexOf(">", IDStart);

//Get ID value
var IDVal = curRowString.substring(IDStart+5,IDEnd)

//Replace old ID with new ID
var oldID = "ID" + IDVal;
var newID = "ID" + (x+1);
var newRowString = curRowString.replace(oldID, newID);

I'm surprised that works at all, but apparently it does.

//*********** Crashes on line below ***************
rows[x].innerHTML = newRowString;

Never use innerHTML to modify a table. You can use it to write an
entire table, or the contents of a cell, but nothing in between. Use
DOM methods.

It seems that you don't know what the ID is (else you'd just use
getElementById), there are other ways of finding form controls or for
searching for particular types of elements:

rows[x].getElementsByTagName('input')


is one, then iterate over the returned collection to find what you
want.

 

[google]

Thanks for your help.

So do you reckon I could replace all the 'for' code with:

var y = 1
for (var x = 0; x < rowsCount; x++)
{
rows[x].getElementsByTagName('hidden').ID = y;
y += 1;
}

Or

var y = 1
for (var x = 0; x < rowsCount; x++)
{
rows[x].getElementsByTagName('hidden')[0].ID = y;
y += 1;
}

 

[Martin Honnen]

rows[x].getElementsByTagName('hidden').ID = y;

getElementsByTagName returns a node list, not a single node. And
'hidden' is not a HTML element tag name, 'input' is for instance.

 

[google]

So I need something similar to the below, except the below doesnt
work:

var y = 1
for (var x = 0; x < rowsCount; x++)
{
rows[x].getElementsByTagName('input')[0].ID = y;
y += 1;

 

[Martin Honnen]

So I need something similar to the below, except the below doesnt
work:

var y = 1
for (var x = 0; x < rowsCount; x++)
{
rows[x].getElementsByTagName('input')[0].ID = y;

We don't know which input's id you want to change, you will have to show
us a sample of the row content. Rob suggested you loop through the input
elements and look for one with type being 'hidden'.
And the property name is 'id' and not 'ID', so once you have the right
input use .id = y and not .ID = y.

 

[David Golightly]

So I need something similar to the below, except the below doesnt
work:

var y = 1
for (var x = 0; x < rowsCount; x++)
{
rows[x].getElementsByTagName('input')[0].ID = y;
y += 1;

http://www.w3.org/TR/html4/types.html

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
followed by any number of letters, digits ([0-9]), hyphens ("-"),
underscores ("_"), colons (":"), and periods (".").

-David