468,765 Members | 1,753 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,765 developers. It's quick & easy.

How to insert a new row to an existing HTML table

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>

================================================== ===========
Oct 30 '05 #1
6 3843


Stefan Mueller wrote:

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!');
};

--

Martin Honnen
http://JavaScript.FAQTs.com/
Oct 30 '05 #2
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
Oct 30 '05 #3
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
Oct 30 '05 #4


Stefan Mueller wrote:

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';
}

--

Martin Honnen
http://JavaScript.FAQTs.com/
Oct 30 '05 #5
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
Oct 30 '05 #6


Stefan Mueller wrote:

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

--

Martin Honnen
http://JavaScript.FAQTs.com/
Oct 31 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Thomas Bartkus | last post: by
3 posts views Thread by Vic Sowers | last post: by
16 posts views Thread by Philip Boonzaaier | last post: by
5 posts views Thread by Andrew | last post: by
28 posts views Thread by Giggle Girl | last post: by
reply views Thread by Marin | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.