Mozilla, innerHTML question.

M

Mitch

Here is some code I have bastardised from a few places, Obviously the
innerHTML coding won't work in Mozilla, could anyone suggest a work
around or fix?

cheers,
Mitch.
****************snip*************************
<html>
<head>
<title>Untitled</title>
<script>
var rowNum = 0;
function addRow(rowCount){
var theTab = document.getElementById('accTab');
var blankRow = theTab.rows[0];
for(r=0;r<rowCount;r++){
var newRow = theTab.insertRow();
for (i=0; i < blankRow.cols; i++) {

newRow.insertCell().innerHTML =
blankRow.cells.innerHTML.replace(/\#/g, rowNum++);

}
}

}
</script>
</head>
<body onLoad='addRow(5);'>
<table cellpadding="0" cellspacing="0" width="100%" id="accTab"
border="1">
<tr style="display:none" class="altRow" cols=6>
<td align="center"><input maxlength="20" size="13"
name="c_code1" ></td>
<td align="center"><select name=duty1><option value=""
rate="">Please select</option></select></td>
<td align="center"><input maxlength="4" size="2" ></td>
<td align="center"><input maxlength="4" size="2" ></td>
<td align="center"><input maxlength="8" size="5" ></td>
<td align="center"><input maxlength="8" size="7" ></td>
</tr>
<tr>
<th align="left">field1<span class="requiredField">*</span></th>
<th align="left">select1 <span class="requiredField">*</span></th>
<th align="left">field2<span class="requiredField">*</span></th>
<th align="left">field3<span class="requiredField">*</span></th>
<th align="left">field4</th>
<th align="left">field5</th>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" border="1">
<tr>
<td colspan="6"><input type=button value='Add Item'
onClick="addRow(1)"></td>
</tr>
</table>
</body>
</html>
*********************************snip****************************
 
D

DU

Mitch said:
Here is some code I have bastardised from a few places, Obviously the
innerHTML coding won't work in Mozilla, could anyone suggest a work
around or fix?

Your HTML markup code first need several fixes.
cheers,
Mitch.
****************snip*************************
<html>
<head>
<title>Untitled</title>
<script>
var rowNum = 0;
function addRow(rowCount){
var theTab = document.getElementById('accTab');
var blankRow = theTab.rows[0];
for(r=0;r<rowCount;r++){
var newRow = theTab.insertRow();

I believe this won't work. insertRow needs a parameter.
"index of type long
The row number where to insert a new row. This index starts from 0
and is relative to the logical order (not document order) of all the
rows contained inside the table."
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903

Also, creating several rows in a for loop won't work in MSIE 6.


for (i=0; i < blankRow.cols; i++)

cols is not a valid attribute of an referenced table row. cells.length
is though.
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-67349879

for(var CellIterator = 0; CellIterator < blankRow.cells.length;
CellIterator++)
would be ok though.

{
newRow.insertCell().innerHTML =
blankRow.cells.innerHTML.replace(/\#/g, rowNum++);


Same thing here. insertCell() needs a parameter and only once the
returned value has been achieved into another objRefCell, then you can
"edit" the content of that cell accordingly.

var objTCell = newRow.insertCell(i);
if(objTCell.tagName == "TD") {objTCell.firstChild.nodeValue = "text node
value";};
or
if(objTCell.nodeType == 1) {objTCell.firstChild.nodeValue = "text node
value";};

"index of type long
The place to insert the cell, starting from 0."
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-68927016
}
}

}
</script>
</head>
<body onLoad='addRow(5);'>
<table cellpadding="0" cellspacing="0" width="100%" id="accTab"
border="1">
<tr style="display:none" class="altRow" cols=6>


cols=6 is invalid html.

<td align="center"><input maxlength="20" size="13"
name="c_code1" ></td>
<td align="center"><select name=duty1><option value=""
rate="">


1- rate="" is an invalid html attribute.
2- select can not exist without a wrapping form element.


Please select said:
<td align="center"><input maxlength="4" size="2" ></td>
<td align="center"><input maxlength="4" size="2" ></td>
<td align="center"><input maxlength="8" size="5" ></td>
<td align="center"><input maxlength="8" size="7" ></td>
</tr>
<tr>
<th align="left">field1<span class="requiredField">*</span></th>
<th align="left">select1 <span class="requiredField">*</span></th>
<th align="left">field2<span class="requiredField">*</span></th>
<th align="left">field3<span class="requiredField">*</span></th>
<th align="left">field4</th>
<th align="left">field5</th>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" border="1">
<tr>
<td colspan="6"><input type=button value='Add Item'
onClick="addRow(1)"></td>
</tr>
</table>
</body>
</html>
*********************************snip****************************

You should validate your document ( http://validator.w3.org/ ): DOM2
HTML methods work best when the document markup syntax is perfectly valid.

Working example in Mozilla-based browsers, MSIE 6 for Windows, Opera 7.x:
Dynamically creating, populating and inserting a table
http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/CreatingTable.html

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html
 
M

mitchel Turner

Thanks for the reply but I have already fixed the problem, Turns out
Mozilla doesn't like insertCell().

BTW the stuff you have pointed out as HTML errors are either being used
or generated by other parts of my app.

Should I post the entire page next time? or just the information
pointent to the question?


Mitch.
 
D

DU

mitchel said:
Thanks for the reply but I have already fixed the problem, Turns out
Mozilla doesn't like insertCell().

That is not my conclusion. In some specific context, insertCell(index)
will not work in MSIE 6 for Windows but, as far as I can see,
insertCell(index) will always work accordingly in Mozilla.
BTW the stuff you have pointed out as HTML errors are either being used
or generated by other parts of my app.

Should I post the entire page next time? or just the information
pointent to the question?


Mitch.

An url is always better, more convenient.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html
 
D

Dr John Stockton

JRS: In article <[email protected]>, seen in
news:comp.lang.javascript said:
mitchel Turner wrote:
An url is always better, more convenient.

Not so. It is not convenient for those who read News off-line.

What is best is for the questioner is to develop a minimum example of
the problem, or to remove extraneous parts from the page which has the
problem, testing at each step (that often reveals the answer). Once the
problem is localised, then if what remains is reasonably small it can be
posted here for all to see and otherwise its URL can be given.

That is as stated in the FAQ, more or less.

DSS.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,902
Latest member
Elena68X5

Latest Threads

Top