Alternative for insertRow and insertCell, which is are supports in Firefox

[raju78.k]

Hi,


I have a problem with FireFox. I have written a function to Add rows
without submiting the form. This function works fine in IE, but not in
FireFox.
The function is :

function
createRows(deviceId,deviceType,modelName,ipAddress,macAddress,imageURL)

{
oTable=document.getElementById("tab:tabFormTable");

var oRow1=oTable.insertRow(oTable.rows.length);
var aRows=oTable.rows;
var aCells=oRow1.cells;
var oCell1_1=aRows(oRow1.rowIndex).insertCell(aCells.length);
var oCell1_2=aRows(oRow1.rowIndex).insertCell(aCells.length);
var oCell1_3=aRows(oRow1.rowIndex).insertCell(aCells.length);
var oCell1_4=aRows(oRow1.rowIndex).insertCell(aCells.length);
var oCell1_5=aRows(oRow1.rowIndex).insertCell(aCells.length);
var oCell1_6=aRows(oRow1.rowIndex).insertCell(aCells.length);

oCell1_1.innerHTML="<input>";
oCell1_2.innerHTML="";
oCell1_3.innerHTML="<font>"+modelName+"</font>";
oCell1_4.innerHTML="<font>"+ipAddress+"</font>";
oCell1_5.innerHTML="<font>"+macAddress+"</font>";
oCell1_6.innerHTML="<input>";
}


Can anyone please tell me what's the feature that is not supported in
Firefox that makes this function not work in the same.

Regards,
Raju

 

[RobG]

Hi,


I have a problem with FireFox. I have written a function to Add rows
without submiting the form. This function works fine in IE, but not in
FireFox.

It's rarely useful to say "it doesn't work" without saying what "works"
is. The insertRow and insertCell methods of Firefox work according to
the W3C DOM Level 2 HTML Specifiction, there are no issues as far as I
know. In this case, IE is allowing you to have what would otherwise be
syntax errors in your code.

The function is :

function
createRows(deviceId,deviceType,modelName,ipAddress,macAddress,imageURL)

{
oTable=document.getElementById("tab:tabFormTable");

var oRow1=oTable.insertRow(oTable.rows.length);

If you want to insert a new row at the end of the current set of rows,
use:

var oRow1 = oTable.insertRow(-1);

var aRows=oTable.rows;
var aCells=oRow1.cells;
var oCell1_1=aRows(oRow1.rowIndex).insertCell(aCells.length);

In Firefox, your error message at this point should have been something
like "aRows is not a function". That is because it isn't, but you are
trying to use it as one. In many cases related to DOM objects, IE
doesn't distinguish between () and [], consequently it treats aRows(i)
as equivalent to aRows. Firefox is ECMAScript compliant, and ()
will cause it to try and execute aRows, not find its ith element.

Fix the syntax error and it "works".

In any case, to add a cell to the end of oRow1, do it directly:

var oCell1_1 = oRow1.insertCell(-1);

Similarly for the rest of your cells. Incidentally, IE will allow you
to use no index for the inserted row, that will cause an error in other
browsers. The index parameter is required by the specification.

<URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-68927016 >

[...]

oCell1_1.innerHTML="<input>";

An input element with only default attributes is pretty useless. What
is the intention here?

oCell1_2.innerHTML="";

There doesn't seem much point in setting the innerHTML property of a
newly created TD element to an empty string: it does nothing useful as
far as I know.

oCell1_3.innerHTML="<font>"+modelName+"</font>";

The font element is deprecated. What are you trying to achieve by
putting a string inside a font element with no defined attributes?

oCell1_4.innerHTML="<font>"+ipAddress+"</font>";
oCell1_5.innerHTML="<font>"+macAddress+"</font>";
oCell1_6.innerHTML="<input>";

Another default input element - what's the point?