How to insert a new row to an existing HTML table

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Stefan Mueller - 30 Oct 2005 17:31 GMT

The following code (HTML) generates a table. Now I'd like to insert a new
row by a javascript.
The following code (javascript) works with the Internet Explorer and also
with Mozilla. However, the inserted button (onClick) in the table does not
work with the Internet Explorer. It only works with Mozilla.
I'm trying the whole Sunday without any success.

Please give me a hint.
Stefan

PS: It seems that also the width-statement (width:75) is not working with
the Internet Explorer.

=============================================================

<html>
<script type="text/javascript">
function InsertRow(WhereToInsert) {
var xtable
var xrow
var xcell
var xelement

xtable = document.getElementById("MyTable")
xrow = xtable.insertRow(WhereToInsert)

xcell = xrow.insertCell(0)
xcell.innerHTML = "Inserted Row"
xcell.setAttribute("bgColor", "#008888")

xcell = xrow.insertCell(1)
xcell.innerHTML = ""
xcell.setAttribute("bgColor", "#008888")
xelement = document.createElement("input")
xelement.setAttribute("type", "button")
xelement.setAttribute("style", "width:75")
xelement.setAttribute("value", "Click")
xelement.setAttribute("onClick", "alert('Wow, it works!')")
xcell.appendChild(xelement)
}
</script>

<body>
<form name="MyForm">
<table id = "MyTable" width = "400" align = "center">
<tr>
<td width = "50%" style = "background-color:#00ffff">
Text Row 1
</td>

<td width = "50%" style = "background-color:#00ffff">
<input type = "button" style = "width:75" value = "Click"
onClick = "alert('Wow, it works!')">
</td>
</tr>

<tr>
<td width = "50%" style = "background-color:#00ffff">
Text Row 2
</td>

<td width = "50%" style = "background-color:#00ffff">
<input type = "button" style = "width:75" value = "Click"
onClick = "alert('Wow, it works!')">
</td>
</tr>
</table>
<p>

Where to insert the new row:
<input type = "text" name = "InsertRowNumber" value = "">
<input type = "button" value = "Add Row" onClick =
"InsertRow(document.MyForm.InsertRowNumber.value)">
</form>
</body>
</html>

=============================================================

Reply to this Message

Martin Honnen - 30 Oct 2005 17:56 GMT

> xelement = document.createElement("input")
> xelement.setAttribute("type", "button")
> xelement.setAttribute("style", "width:75")
> xelement.setAttribute("value", "Click")
> xelement.setAttribute("onClick", "alert('Wow, it works!')")

setAttribute with script in HTML documents gives you all kind of cross
browser incompatibilities, it is usually easier and safer to script
element object properties e.g.
xelement.type = 'button';
xelement.style.width = '75px';
xelement.defaultValue = xelement.value = 'Click';
xelement.onclick = function (evt) {
alert('Wow, it works cross browser!');
};

Signature

Martin Honnen
http://JavaScript.FAQTs.com/

Reply to this Message

Stefan Mueller - 30 Oct 2005 18:42 GMT

Hello

You are great!!! I've been testing the whole day and now it works with both
browsers. Many thanks.

Do you perhaps know how to translate the following setAttribute (not working
with the Internet Explorer) to the format xelement.xxx?

xelement.setAttribute("class", "style_button")
xelement.setAttribute("onMouseover", "className =
'style_button_mouseover'")
xelement.setAttribute("onMouseout", "className = 'style_button'")

Do you also know how to add class, onMouseover and onMouseout to the whole
row:
In HTML I do:
<tr id="MyRow" class = "stil_tabelleneintrag"
onMouseover = "className = 'stil_tabelleneintrag_mouseover'"
onMouseout = "className = 'stil_tabelleneintrag'">

In JavaScript I guess I have to use xrow.xxx
xtable = document.getElementById("MyTable")
xrow = xtable.insertRow(WhereToInsert)

Stefan

Reply to this Message

Martin Honnen - 30 Oct 2005 19:14 GMT

> xelement.setAttribute("class", "style_button")

The class attribute is scripted as the property className e.g.
xlement.className = 'style_button';
That is one of the few exceptions and was done because 'class' is a
keyword or reserved word in many programming languages.

> xelement.setAttribute("onMouseover", "className =
> 'style_button_mouseover'")

Within HTML documents you can usually script HTML event handlers as
elementObject.oneventname = expressionYieldingAFunctionObject;
e.g.
xelement.onmouseover = function (evt) {
this.className = 'style_button_mouseover';
}

Signature

Martin Honnen
http://JavaScript.FAQTs.com/

Reply to this Message

Stefan Mueller - 30 Oct 2005 20:36 GMT

Great! It work's perfekt. Thanks again.

I was quite close. I've tried 'classname' instead of 'className'. It's very
confusing. Sometimes you have to use big letters (like in 'className') and
sometimes only small letters (like in 'onmouseover'). However, I know now
that I always have to try all versions.

What does 'evt' mean in '... = function(evt) {...}? Can I omit it?

I still have one problem with my inserted row. The text style is not
correct.
I HTML I do:
<td width = "50%" align = "center">
<h5 class = "style_table_entry">Text in cell</h5>
</td>

In JavaScript I do:
xcell = xrow.insertCell(2)
xcell.style.width = "50%"
xcell.align = "center"
xcell.className = "style_table_entry"
xcell.innerHTML = "New text in cell"

The text 'New text in cell' has not the style 'style_table_entry' because
this style is defined as 'h5.style_table_entry'. How can I add the new text
as '<h5>'?
I tried
xcell.innerHTML = "<h5> New text in cell </h5>"
but it does not work.

Many thanks
Stefan

Reply to this Message

Martin Honnen - 31 Oct 2005 12:50 GMT

> What does 'evt' mean in '... = function(evt) {...}? Can I omit it?

It is a formal parameter to that function used as an event handler where
certain implementations (Netscape, Mozilla, Opera) pass in the event
object when the event handler is called. If you don't need the event
object in your event handlers you can of course omit the formal
parameter. Having it is closer to what an event handler attribute in
markup translates to in code however.

> How can I add the new text
> as '<h5>'?

You can create any element object with document.createElement e.g.
var h5 = document.createElement('h5');
h5.appendChild(document.createTextNode('Kibology for all'));
xcell.appendChild(h5);

Signature

Martin Honnen
http://JavaScript.FAQTs.com/

Reply to this Message

Stefan Mueller - 30 Oct 2005 18:48 GMT

Hello

You are great!!! I've been testing the whole day and now it works with both
browsers. Many thanks.

Do you perhaps know how to translate the following setAttribute (not working
with the Internet Explorer) to the format xelement.xxx?

xelement.setAttribute("class", "style_button")
xelement.setAttribute("onMouseover", "className =
'style_button_mouseover'")
xelement.setAttribute("onMouseout", "className = 'style_button'")
xelement.setAttribute("tabindex", "999")

Do you also know how to add class, onMouseover and onMouseout to the whole
row:
In HTML I do:
<tr id="MyRow" class = "stil_tabelleneintrag"
onMouseover = "className = 'stil_tabelleneintrag_mouseover'"
onMouseout = "className = 'stil_tabelleneintrag'">

In JavaScript I guess I have to use xrow.xxx
xtable = document.getElementById("MyTable")
xrow = xtable.insertRow(WhereToInsert)

Stefan

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / October 2005

How to insert a new row to an existing HTML table