S
Stefan Mueller
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_tableentry_middle">Entry middle</h5>
I guess it's only somehow
<class = "style_tableentry_middle">Entry 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_tableentry_middle">Entry middle</h5>
instead of
<class = "style_tableentry_middle">Entry middle
But how to do that? Does anyone have any good idea?
Stefan
==========================================================
<html>
<style type = "text/css">
h5.style_tabletitle {
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_tableentry_background {
background-color: #ffcc00;
}
tr.style_tableentry_mouseover {
font-family: verdana, tahoma, arial, helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
color: #000000;
background-color: #ffdd77;
}
h5.style_tableentry_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_tableentry_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.getElementById("MyTable")
// Add row
xrow = xtable.insertRow(2)
xrow.className = "style_tableentry_background"
xrow.onmouseover = function() {this.className =
"style_tableentry_mouseover"}
xrow.onmouseout = function() {this.className =
"style_tableentry_background"}
// Add cell left
xcell = xrow.insertCell(0)
xcell.style.width = "40%"
xcell.bgColor = "#ff8800"
xcell.innerHTML = ""
// Add cell middle
xcell = xrow.insertCell(1)
xcell.style.width = "30%"
xcell.className = "style_tableentry_middle"
xcell.innerHTML = "My entry middle"
// Add cell right
xcell = xrow.insertCell(2)
xcell.style.width = "30%"
xcell.className = "style_tableentry_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_tabletitle">Title leftMiddle</h5>
</td>
<td width = "30%" style = "background-color:#cc0000">
<h5 class = "style_tabletitle">Title leftMiddle</h5>
</td>
<td width = "30%" style = "background-color:#cc0000">
<h5 class = "style_tabletitle">Title leftMiddle</h5>
</td>
</td>
</tr>
<tr class = "style_tableentry_background"
onMouseover = "className = 'style_tableentry_mouseover'"
onMouseout = "className = 'style_tableentry_background'">
<td width = "40%" style = "background-color:#ff8800">
</td>
<td width = "30%">
<h5 class = "style_tableentry_middle">Entry middle</h5>
</td>
<td width = "30%">
<h5 class = "style_tableentry_right">Entry right</h5>
</td>
</tr>
</table>
<input type = "button" name = "MyButton" value = "Add Row" onClick =
"InsertRow()">
</form>
</body>
</html>
==========================================================
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_tableentry_middle">Entry middle</h5>
I guess it's only somehow
<class = "style_tableentry_middle">Entry 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_tableentry_middle">Entry middle</h5>
instead of
<class = "style_tableentry_middle">Entry middle
But how to do that? Does anyone have any good idea?
Stefan
==========================================================
<html>
<style type = "text/css">
h5.style_tabletitle {
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_tableentry_background {
background-color: #ffcc00;
}
tr.style_tableentry_mouseover {
font-family: verdana, tahoma, arial, helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
color: #000000;
background-color: #ffdd77;
}
h5.style_tableentry_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_tableentry_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.getElementById("MyTable")
// Add row
xrow = xtable.insertRow(2)
xrow.className = "style_tableentry_background"
xrow.onmouseover = function() {this.className =
"style_tableentry_mouseover"}
xrow.onmouseout = function() {this.className =
"style_tableentry_background"}
// Add cell left
xcell = xrow.insertCell(0)
xcell.style.width = "40%"
xcell.bgColor = "#ff8800"
xcell.innerHTML = ""
// Add cell middle
xcell = xrow.insertCell(1)
xcell.style.width = "30%"
xcell.className = "style_tableentry_middle"
xcell.innerHTML = "My entry middle"
// Add cell right
xcell = xrow.insertCell(2)
xcell.style.width = "30%"
xcell.className = "style_tableentry_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_tabletitle">Title leftMiddle</h5>
</td>
<td width = "30%" style = "background-color:#cc0000">
<h5 class = "style_tabletitle">Title leftMiddle</h5>
</td>
<td width = "30%" style = "background-color:#cc0000">
<h5 class = "style_tabletitle">Title leftMiddle</h5>
</td>
</td>
</tr>
<tr class = "style_tableentry_background"
onMouseover = "className = 'style_tableentry_mouseover'"
onMouseout = "className = 'style_tableentry_background'">
<td width = "40%" style = "background-color:#ff8800">
</td>
<td width = "30%">
<h5 class = "style_tableentry_middle">Entry middle</h5>
</td>
<td width = "30%">
<h5 class = "style_tableentry_right">Entry right</h5>
</td>
</tr>
</table>
<input type = "button" name = "MyButton" value = "Add Row" onClick =
"InsertRow()">
</form>
</body>
</html>
==========================================================