How to insert a new row to an existing HTML table

Stefan Mueller · Oct 30, 2005

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>

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

Martin Honnen · Oct 30, 2005

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

Stefan Mueller · Oct 30, 2005

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

Stefan Mueller · Oct 30, 2005

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

Martin Honnen · Oct 30, 2005

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

Stefan Mueller · Oct 30, 2005

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

Martin Honnen · Oct 31, 2005

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

How to add dropdown selected data to table using jquery	2	Jul 2, 2022
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
How to have two html audio players on one page?	0	May 3, 2022
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
I want to Display Excel As HTML In js	2	Feb 24, 2023
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
Image shifts to the right when export the page to pdf	4	May 5, 2023

How to insert a new row to an existing HTML table

Stefan Mueller

Martin Honnen

Stefan Mueller

Stefan Mueller

Martin Honnen

Stefan Mueller

Martin Honnen

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads