With the following code I can add a new row to an existing table. That
really works great. Many thanks to all who helped me so far.
But my problem is that the added cells do somehow not have the same style as
the first row which I added by HTML.
I do everything with the JavaScript what I do with HTML except that the
added text with the JavaScript is not
<h5 class = "style_tableent ry_middle">Entr y middle</h5>
I guess it's only somehow
<class = "style_tableent ry_middle">Entr y middle
Also the 'mouseover' effect on the inserted row is not exact the same.
I tried to avoid using <h5> and tried to use <tr> and <td> - without success
(<tr> and <td> seems not to support margins like e.g. margin-left).
I guess that I just have to add the text with the JavaScript as
<h5 class = "style_tableent ry_middle">Entr y middle</h5>
instead of
<class = "style_tableent ry_middle">Entr y middle
But how to do that? Does anyone have any good idea?
Stefan
=============== =============== =============== =============
<html>
<style type = "text/css">
h5.style_tablet itle {
font-family: verdana, tahoma, arial, helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #000000;
margin-left: 7;
margin-right: 0;
margin-top: 5;
margin-bottom: 6;
}
tr.style_tablee ntry_background {
background-color: #ffcc00;
}
tr.style_tablee ntry_mouseover {
font-family: verdana, tahoma, arial, helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
color: #000000;
background-color: #ffdd77;
}
h5.style_tablee ntry_middle {
font-family: verdana, tahoma, arial, helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
color: #ff0000;
margin-left: 7;
margin-right: 7;
margin-top: 5;
margin-bottom: 6;
}
h5.style_tablee ntry_right {
font-family: verdana, tahoma, arial, helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
color: #0000ff;
margin-left: 7;
margin-right: 7;
margin-top: 5;
margin-bottom: 6;
}
</style>
<script type="text/javascript">
function InsertRow() {
var xtable
var xrow
var xcell
xtable = document.getEle mentById("MyTab le")
// Add row
xrow = xtable.insertRo w(2)
xrow.className = "style_tableent ry_background"
xrow.onmouseove r = function() {this.className =
"style_tableent ry_mouseover"}
xrow.onmouseout = function() {this.className =
"style_tableent ry_background"}
// Add cell left
xcell = xrow.insertCell (0)
xcell.style.wid th = "40%"
xcell.bgColor = "#ff8800"
xcell.innerHTML = ""
// Add cell middle
xcell = xrow.insertCell (1)
xcell.style.wid th = "30%"
xcell.className = "style_tableent ry_middle"
xcell.innerHTML = "My entry middle"
// Add cell right
xcell = xrow.insertCell (2)
xcell.style.wid th = "30%"
xcell.className = "style_tableent ry_right"
xcell.innerHTML = "My entry right"
}
</script>
<body>
<form name="MyForm">
<table id = "MyTable" width = "500" border = "1" align = "center">
<tr>
<td width = "40%" style = "background-color:#ff8800">
<h5 class = "style_tabletit le">Title leftMiddle</h5>
</td>
<td width = "30%" style = "background-color:#cc0000">
<h5 class = "style_tabletit le">Title leftMiddle</h5>
</td>
<td width = "30%" style = "background-color:#cc0000">
<h5 class = "style_tabletit le">Title leftMiddle</h5>
</td>
</td>
</tr>
<tr class = "style_tableent ry_background"
onMouseover = "className = 'style_tableent ry_mouseover'"
onMouseout = "className = 'style_tableent ry_background'" >
<td width = "40%" style = "background-color:#ff8800">
</td>
<td width = "30%">
<h5 class = "style_tableent ry_middle">Entr y middle</h5>
</td>
<td width = "30%">
<h5 class = "style_tableent ry_right">Entry right</h5>
</td>
</tr>
</table>
<input type = "button" name = "MyButton" value = "Add Row" onClick =
"InsertRow( )">
</form>
</body>
</html>
=============== =============== =============== =============
