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>
================================================== ======== 14  2301 
Stefan Mueller wrote: 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>
CSS class names must not contain underlines. From the CSS2 grammar:
| class
| : '.' IDENT
| ;
| [...]
| nmstart [a-z]|{nonascii}|{escape}
| nmchar [a-zA-Z0-9-]|{nonascii}|{escape}
| ident {nmstart}{nmchar}*
The underline character in identifiers has been added in CSS 2.1.
Interestingly, it has been removed again in CSS3 (Syntax). However,
neither has achieved the status of Recommendation yet, so it seems
to be good practice to not use the underline character.
[...]
<html>
A DOCTYPE declaration is missing before this element, such as
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<style type = "text/css">
Note that the `style' element must be child of the `head' element.
You omit the tags optional for the latter element which may introduce
problems with not fully conforming implementations.
h5.style_tabletitle {
font-family: verdana, tahoma, arial, helvetica, sans-serif;
font-size: 8pt;
`pt' is a unit suited for printouts, not for display devices.
Use `em' or `%' instead, `px' if you do not care about buggy IEs.
font-weight: bold;
font: 10px bold Verdana, ..., sans-serif;
color: #000000;
<http://www.w3.org/QA/Tips/color>
Besides, the value should be independent on color depth: #000
margin-left: 7;
margin-right: 0;
margin-top: 5;
margin-bottom: 6;
If the length is not 0, a unit is required which is probably `px' here.
<http://jigsaw.w3.org/css-validator/>
}
tr.style_tableentry_background {
background-color: #ffcc00;
See above and replace with
background-color: #fc0;
}
tr.style_tableentry_mouseover {
[...]
See above.
background-color: #ffdd77;
This requires a color depth of at least 65536 (64k) to be properly displayed
(and, therefore, serve as background for legible text). Try to stick to
Real Websafe[tm] color values using only a triplet of #xyz with x, y, z
= {0, 3, ..., c, f} where x, y and z may have different value. #xyz will
be internally expanded to #xxyyzz if appropriate for the current display
device.
}
h5.style_tableentry_middle {
[...]
}
h5.style_tableentry_right {
[...]
}
See above.
</style>
<script type="text/javascript">
The `script' element must be child of the `head' or `body' element.
See above.
function InsertRow() {
var xtable
JS/ECMAScript statements should always be ended with a semicolon to
avoid undesired side effects with automatic semicolon insertion.
[...]
xtable = document.getElementById("MyTable")
Implementations of DOM interface methods, such as
HTMLDocument::getElementById(), should be tested
prior to usage.
<http://pointedears.de/scripts/test/whatami>
// Add row
xrow = xtable.insertRow(2)
Same here.
[...]
</script>
<body>
<form name="MyForm">
The required `action' attribute value is missing.
<http://validator.w3.org/>
<http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you>
<table id = "MyTable" width = "500" border = "1" align = "center">
The `align' attribute for the `table' element is deprecated from HTML 4.01
on. This means it is not Valid in HTML 4.01 Strict, XHTML 1.0 Strict or
XHTML 1.1.
<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>
Tables should not be (ab)used for layout purposes. Use CSS to position
block elements instead.
Headings (`hX' elements with X = [1..6]) should not be abused to achieve
greater font sizes. They should reflect the structure of the document
instead. If a different font size is needed, use the CSS font* properties.
<http://www.w3.org/QA/Tips/>
[...]
<input type = "button" name = "MyButton" value = "Add Row" onClick =
"InsertRow()">
Since this button does not work without client-side
scripting, it should be generated through it, the
most simple approach being
<script type="text/javascript">
document.write(
'<input type="button" name="MyButton" value="Add Row"'
+ ' onclick="InsertRow()">');
</script>
PointedEars
P.S.: de.comp.lang.javascript exists.
> CSS class names must not contain underlines.
Ups, I didn't know. That means I have to replace all '_' with e.g. '-'. The
character '-' is fine? Correct?
But in JavaScript functions I can use '_'. Correct? font-size: 8pt;
`pt' is a unit suited for printouts, not for display devices.
Hmm, I'd like to have an unit for one pixel on the screen. But I guess it
doesn't exist except 'px' which is buggy in IE like you explained. <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>
Headings (`hX' elements with X = [1..6]) should not be abused to achieve
greater font sizes. They should reflect the structure of the document
instead. If a different font size is needed, use the CSS font*
properties.
I use 'hX' only that I can address the appropriate text like
h5.style_tableentry_middle
You have written so many hints and I'm still not through in fixing all my
faults on my page. However, I still don't know what I have to change so that
the added cells (with the JavaScript) do have the same style as the first
row which I added by HTML.
In any case, thanks a lot for all your corrections and hints and if you
could give me a little bit more specific hint in how to solve my problem I
really would be glad.
Thanks again
Stefan
Stefan Mueller wrote: The character '-' is fine [for CSS class names]? Correct?
But in JavaScript functions I can use '_'. Correct?
Correct, as CSS2 Grammar and JavaScript Reference/ECMAScript 3 Specification
say.
<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>
Headings (`hX' elements with X = [1..6]) should not be abused to achieve
greater font sizes. They should reflect the structure of the document
instead. If a different font size is needed, use the CSS font*
properties.
I use 'hX' only that I can address the appropriate text like
h5.style_tableentry_middle
You probably should not. You do not need a specific element just to
format text. For example, if you left out the `h5' part in your CSS
rule, it would apply to almost any element that has the `class'
attribute and the value `style_tableentry_middle' (which should be
`style-tableentry-middle'). The difference with the `hX' block elements
is that those element have structural meaning beyond their display (e.g.
for application of outlines and automatically generated list of contents),
so use them wisely. And there are more possibilities for selectors than
just classname-based ones: <http://www.w3.org/TR/CSS2/selector.html>.
So, IMHO, a document may have more than `h5' element but not within
juxtapositioned table cells. If you would describe why you find this
necessary, I'll probably have a suggestion better suited to your
approach.
But that really belongs into a CSS newsgroup
(comp.infosystems.www.authoring.stylesheets or
de.comm.infosystems.www.authoring.misc), or in
private e-mail communication (with me also in
German, if you like).
You have written so many hints and I'm still not through in fixing all my
faults on my page. However, I still don't know what I have to change so
that the added cells (with the JavaScript) do have the same style as the
first row which I added by HTML.
See <http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you>.
In any case, thanks a lot for all your corrections and hints
You're welcome.
and if you could give me a little bit more specific hint in how to solve
my problem I really would be glad.
Unless your document is all Valid and one has seen all your code, one can
only make wild guesses. Make it Valid, post the URI of that test case and
I, too, will be happy to help again -- if still necessary :)
Regards,
PointedEars
Thomas 'PointedEars' Lahn <Po*********@web.de> wrote: The underline character in identifiers has been added in CSS 2.1.
It is considered an error in the CSS 2.0 spec corrected in the errata:
http://www.w3.org/Style/css2-updates...12-errata.html
Interestingly, it has been removed again in CSS3 (Syntax).
It hasn't: http://www.w3.org/TR/2003/WD-css3-sy...13/#characters
Even if it were, there is no version sniffing in CSS, thus the backward
compatibility requirement means that UAs must continue to support it.
However,
neither has achieved the status of Recommendation yet, so it seems
to be good practice to not use the underline character.
The only possible reasons to avoid it is that a few obsolete browsers do
not support it, and it must not be used as the first character of a
class name.
color: #000000;
Besides, the value should be independent on color depth: #000
For this particular value #000 resolves to #000000, there is no
difference.
background-color: #ffdd77;
This requires a color depth of at least 65536 (64k) to be properly displayed
A browser with a lesser colour capability gamma corrects such a value to
a supported value.
The only scenario where it could conceivably result in difficulties is
when an author codes foreground and background values of insufficient
contrast. Remapping specified values to a supported value could possibly
result in a reduction in contrast. But the real cause for such a problem
would be the initial use of insufficient contrast, not the remapping by
the very few devices with a reduced colour capability.
(and, therefore, serve as background for legible text). Try to stick to
Real Websafe[tm] color values using
This is antiquated advice, very few devices only support "web safe"
colours, those that do for example also cannot handle jpegs properly,
not something to care about.
Furthermore, dedicated devices that only support "web safe" colours are
unlikely to support CSS in the first place.
--
Spartanicus
I prefer the newsgroups instead of e-mails because anyone can find the
solutions and suggestions on the web. I've found there so many nice hints
and solutions. I use 'hX' only that I can address the appropriate text like
h5.style_tableentry_middle
You probably should not. You do not need a specific element just to
format text. For example, if you left out the `h5' part in your CSS
rule, it would apply to almost any element that has the `class'
attribute ...
I really don't know how to use a style if I don't have something like 'hX'
to address the appropriate element. The following code with 'h5' works in my
opinion fine. The texts do also have the defined top and botton margins:
==========================
<html>
<style type = "text/css">
h5.style-tabletitle {
font-family: verdana, tahoma, arial, helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #000;
margin-left: 7px;
margin-right: 0px;
margin-top: 25px;
margin-bottom: 15px;
}
</style>
<body>
<form name="MyForm">
<table id = "MyTable" width = "500" border = "1" align = "center">
<tr>
<td width = "40%">
<h5 class = "style-tabletitle">Title left</h5>
</td>
<td width = "60%">
<h5 class = "style-tabletitle">Title right</h5>
</td>
</tr>
</table>
</form>
</body>
</html>
==========================
However if I remove the 'h5' it's not working anymore (wrong font, no
margins, ...). Please have a look at the following code without 'h5':
==========================
<html>
<style type = "text/css">
style-tabletitle {
font-family: verdana, tahoma, arial, helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #000;
margin-left: 7px;
margin-right: 0px;
margin-top: 25px;
margin-bottom: 15px;
}
</style>
<body>
<form name="MyForm">
<table id = "MyTable" width = "500" border = "1" align = "center">
<tr>
<td width = "40%">
<class = "style-tabletitle">Title left
</td>
<td width = "60%">
<class = "style-tabletitle">Title right
</td>
</tr>
</table>
</form>
</body>
</html>
==========================
Did I miss something? Any help is very appreciated
Stefan
Stefan Mueller wrote: However if I remove the 'h5' it's not working anymore (wrong font, no
margins, ...). Please have a look at the following code without 'h5':
==========================
<html>
<style type = "text/css">
style-tabletitle {
<snip>
Did I miss something? Any help is very appreciated
You removed 'h5.' not 'h5'. Try again leaving the dot in:
.style-tabletitle {
See http://www.w3.org/TR/CSS2/selector.html#class-html for a description of
the dot notation.
>> Did I miss something? Any help is very appreciated
You removed 'h5.' not 'h5'. Try again leaving the dot in:
.style-tabletitle {
I removed now only the 'h5' instead of 'h5.'. However, I still don't have
the correct font, size, margins, ...
Is the following code for you working?
=================================
<html>
<style type = "text/css">
.style-tabletitle {
font-family: verdana, tahoma, arial, helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #000;
margin-left: 7px;
margin-right: 0px;
margin-top: 25px;
margin-bottom: 15px;
}
</style>
<body>
<form name="MyForm">
<table id = "MyTable" width = "500" border = "1" align = "center">
<tr>
<td width = "40%">
<class = "style-tabletitle">Title left
</td>
<td width = "60%">
<class = "style-tabletitle">Title right
</td>
</tr>
</table>
</form>
</body>
</html>
=================================
I tested it with Mozilla and IE.
Stefan
"Stefan Mueller" <se**************@yahoo.com> wrote in message
news:dk**********@news.imp.ch... Did I miss something? Any help is very appreciated
You removed 'h5.' not 'h5'. Try again leaving the dot in:
.style-tabletitle {
I removed now only the 'h5' instead of 'h5.'. However, I still don't have
the correct font, size, margins, ...
Is the following code for you working?
=================================
<html>
<style type = "text/css">
.style-tabletitle {
font-family: verdana, tahoma, arial, helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #000;
margin-left: 7px;
margin-right: 0px;
margin-top: 25px;
margin-bottom: 15px;
}
</style>
<body>
<form name="MyForm">
<table id = "MyTable" width = "500" border = "1" align = "center">
<tr>
<td width = "40%">
<class = "style-tabletitle">Title left
</td>
<td width = "60%">
<class = "style-tabletitle">Title right
</td>
</tr>
</table>
</form>
</body>
</html>
...
<div class = "style-tabletitle">Title left</div>
...
or
...
<p class = "style-tabletitle">Title left</p>
...
or something else... You need a tag.
--
Dag.
Spartanicus wrote: Thomas 'PointedEars' Lahn <Po*********@web.de> wrote: The underline character in identifiers has been added in CSS 2.1.
It is considered an error in the CSS 2.0 spec corrected in the errata:
http://www.w3.org/Style/css2-updates...12-errata.html
The CSS2 errata are outdated which you would have known if you had read:
| This document is currently not maintained. The CSS working group is
| developing CSS 2.1. When features common to CSS2 and CSS 2.1 are defined
| differently, please consider the definition in CSS 2.1 as errata for CSS2.
| While CSS 2.1 is still a Working Draft, the errata are to be considered
| proposed errata.
Well, CSS 2.1, which (as I well wrote!) includes the underline character
in class names, is still (again) a Working Draft, so its contents can
only be considered proposed errata. It's not a Specification, CSS2 is.
Interestingly, it has been removed again in CSS3 (Syntax).
It hasn't: http://www.w3.org/TR/2003/WD-css3-sy...13/#characters
,-<http://www.w3.org/TR/2003/WD-css3-syntax-20030813/#grammar0>
|
| class
| : '.' IDENT
| ;
| [...]
| nmstart [a-z]|{nonascii}|{escape}
| nmchar [a-z0-9-]|{nonascii}|{escape}
| ident [-]?{nmstart}{nmchar}*
But, as you can read there, if you are able and willing to do so:
| This document is a draft of one of the modules of CSS Level 3 (CSS3).
| Some parts of the document are derived from the CSS Level 1 and CSS Level
| 2 recommendations, and those parts are thus relatively stable. However,
| it is otherwise an early draft, and considerable revision is expected in
| later drafts, especially in formalization of error handling behavior, the
| conformance requirements for partial implementations (given the
| modularization of CSS3), and integration with other CSS3 modules.
| [...]
| This is a draft document and may be updated, replaced or obsoleted by
| other documents at any time. It is inappropriate to cite this document as
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
| other than work in progress. Its publication does not imply endorsement by
^^^^^^^^^^^^^^^^^^^^^^^^^^^^
| the W3C membership or the CSS & FP Working Group (members only).
I did not cite it as if it were a Specification, you did.
Even if it were, there is no version sniffing in CSS, thus the backward
compatibility requirement means that UAs must continue to support it.
CSS2.1 and CSS3 are not even Recommendations (read: Specifications) and
you are talking about backwards compatibility to them. You made my day.
However,neither has achieved the status of Recommendation yet, so
it seems to be good practice to not use the underline character.
The only possible reasons to avoid it is that a few obsolete browsers do
not support it, and it must not be used as the first character of a
class name.
Wrong. There is not one good reason to use it. There
is one good reason to not use it: the Specification.
color: #000000;
Besides, the value should be independent on color depth: #000
For this particular value #000 resolves to #000000, there is no
difference.
Wrong.
,-<http://www.w3.org/TR/REC-CSS2/syndata.html#color-units>
|
| The three-digit RGB notation (#rgb) is converted into six-digit form
| (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0
| expands to #ffbb00. This ensures that white (#ffffff) can be specified
| with the short notation (#fff) and removes any dependencies on the color
| depth of the display.
background-color: #ffdd77;
This requires a color depth of at least 65536 (64k) to be properly
displayed
A browser with a lesser colour capability gamma corrects such a value to
a supported value.
Which is the problem regarding legibility of text displayed on such
a background color: dithering may occur. Besides, it is not the
featurelessness of the browser (read: user agent) that introduces
the problem but that of the display device, as I already mentioned.
The only scenario where it could conceivably result in difficulties is
when an author codes foreground and background values of insufficient
contrast.
No, it is not.
(and, therefore, serve as background for legible text). Try to stick to
Real Websafe[tm] color values using
This is antiquated advice,
It is not.
very few devices only support "web safe" colours,
Real Websafe[tm] colors are different from the former Websafe Colors
in the respect that they are also independent of color depth, adhering
to CSS2, section 4.3.6. They have proven to provide the best contrast
and be subject to the least gamma correction, as you call it, on a
number of platforms and devices.
those that do for example also cannot handle jpegs properly,
not something to care about.
Obviously you have too less experience in both today's Web display
devices and CSS to comment on that.
Furthermore, dedicated devices that only support "web safe" colours
are unlikely to support CSS in the first place.
Rubbish.
And in contrast to my followup, which at least partly dealt
with matters of JS, yours does not even belong here in cljs.
PointedEars, X-Post & Followup-To comp.infosystems. www.authoring.stylesheets
> ... <div class = "style-tabletitle">Title left</div>
...
or
...
<p class = "style-tabletitle">Title left</p>
...
or something else... You need a tag.
Yea, I also think I need a tag. And now we are back to my initial problem.
I can add everything with the JavaScript what I do with HTML (please see my
first post) except that the added text with the JavaScript is not with the
'h5' tag like
<h5 class = "style-tabletitle">Title left</h5>
With the JavaScript I can add only
<class = "style-tabletitle">Title left
But like we figured out, I do need a tag. Or does someone know a solution
without a tag?
My question is still, how to add this tag with a JavaScript?
Stefan
Stefan Mueller wrote:
Please learn how to quote, including proper attribution:
<http://jibbering.com/faq/>
vvvvvvvvvvvvvvvvvvvvvvvvvvv ...
<div class = "style-tabletitle">Title left</div>
...
or
...
<p class = "style-tabletitle">Title left</p>
...
or something else... You need a tag.
Yea, I also think I need a tag. And now we are back to my initial problem.
You need an element, not only a tag. An element has a start tag and
can have an end tag, which both can be optional, and it may have content
(otherwise its content model is called EMPTY).
Example
--------
The declaration of the `p' element in the HTML 4.01 Transitional Document
Type Definition (DTD):
<!ELEMENT P - O (%inline;)* -- paragraph -->
<!ATTLIST P
%attrs; -- %coreattrs, %i18n, %events --
%align; -- align, text alignment --
`p' is an ([X]HTML) element. It's (element) type is P.
It has the start tag `<p ...>' and the end tag `</p>' which enclose its
content. In HTML 4.01 Transitional, the end tag is optional ("O"; in
which case the content ends e.g. at the next `<p ').
The element has inline content, meaning that its content may include
text nodes with entity references and "inline" elements, but e.g. no
`p' elements (as `p' is a "block" element).
It is important to understand the difference between elements and tags
in order to understand how CSS works when applied to structural markup.
I can add everything with the JavaScript what I do with HTML (please see
my first post) except that the added text with the JavaScript is not with
the 'h5' tag like
<h5 class = "style-tabletitle">Title left</h5>
With the JavaScript I can add only
<class = "style-tabletitle">Title left
No, the script insert a row
xrow = xtable.insertRow(2)
inserts a cell to this row
xcell = xrow.insertCell(1)
provides it with `style' and `class' attributes
xcell.style.width = "30%"
xcell.className = "style_tableentry_middle"
and a content
xcell.innerHTML = "My entry middle"
The result (which can be seen e.g. in Firefox when using the
View Selection Source feature) is
<tr>
<td style="width:30%" class="style_tableentry_middle">My entry
middle</td>
</tr>
which is not quite what you expected above.
But like we figured out, I do need a tag. Or does someone know a solution
without a tag?
In a structural markup language like HTML, you cannot format content without
an element that contains it. So you either format an existing element
(like the `td' element, see above) which contains to content, or you add a
formatted child element which contains it.
But still, tables and `h5' are probably not what you are looking for in the
first place.
My question is still, how to add this tag with a JavaScript?
You can add child elements in several ways, depending on the level of
support for a respective DOM. To add a `p' element as child of another
element which DOM representation objects is referred by `x', one W3C DOM
Level 2 (standards compliant) approach could be (untested)
function isMethod(o)
{
if (typeof o == "string")
{
o = eval(o);
}
var t;
return ((t = typeof o) == "function" || t == "object" && o);
}
// x has been assigned an HTMLElement object reference earlier
var p, t;
if (isMethod("x.appendChild") // feature test
&& isMethod("document.createElement") // feature test
&& (p = document.createElement("p"))) // object reference test
{
p.className = "style-tabletitle";
if (isMethod("p.appendChild") // feature test
&& isMethod("document.createTextNode") // feature test
&& (t = document.createTextNode("My entry middle"))) // ref. test
{
p.appendChild(t);
}
x.appendChild(p);
}
The resulting markup would be
<x><p class="style-tabletitle">My entry middle</p></x>
(The type of the `x' element would of course be that of the element
represented in the DOM by the object referred to by `x' above.)
This of course requires the markup and style sheet it is applied to
to be Valid.
HTH
PointedEars
First of all many thanks for your great explanations and your help. I really
appreciate it very much. The result (which can be seen e.g. in Firefox when using the
View Selection Source feature) is
<tr>
<td style="width:30%" class="style_tableentry_middle">My entry
middle</td>
</tr>
Wow, that's really a very nice feature. Thanks for telling me.
I'm really surprised that the class statement goes to the <td> and not to
the text line as I expected.
I tried to insert your code into my insertRow function (only for the middle
column) but it doesn't work.
I get the error message: 'x is not defined' what is of course correct. But
I've no idea how to define it.
I guess 'x' has to be the same letter like in
x.style-tableentry-middle {
Correct?
Here is my code (only the Javascript part, the whole code is in my first
post):
===========================
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"
var p, t;
if (isMethod("x.appendChild") // feature test
&& isMethod("document.createElement") // feature test
&& (p = document.createElement("p"))) { // object reference test
p.className = "style-tableentry-middle";
if (isMethod("p.appendChild") //
feature test
&& isMethod("document.createTextNode") //
feature test
&& (t = document.createTextNode("My entry middle"))) { // ref.
test
p.appendChild(t);
}
x.appendChild(p);
}
// Add cell right
xcell = xrow.insertCell(2)
xcell.style.width = "30%"
xcell.className = "style-tableentry-right"
xcell.innerHTML = "My entry right"
}
function isMethod(o) {
if (typeof o == "string") {
o = eval(o);
}
var t;
return ((t = typeof o) == "function" || t == "object" && o);
}
===========================
It would be really great if you or someone else could give me some further
help because with my knowledge I'm not able to handle it.
Stefan
Stefan Mueller wrote: First of all many thanks for your great explanations and your help. I
really appreciate it very much.
I'm glad to read that; if only you would appreciate it in the way I'd like
to think of it (and no, although that would be nice too, that's NOT mainly
financial compensation for it; see below). Sigh. [psf 10.1]
The result (which can be seen e.g. in Firefox when using the
View Selection Source feature) is
<tr>
<td style="width:30%" class="style_tableentry_middle">My entry
middle</td>
</tr>
Wow, that's really a very nice feature. Thanks for telling me.
I'm really surprised that the class statement goes to the <td> and not to
the text line as I expected.
Well, it's quite obvious from the source code, even without any DOM
experience. The property identifiers used are self-explaining after all.
I tried to insert your code into my insertRow function (only for the
middle column) but it doesn't work.
I get the error message: 'x is not defined' what is of course correct. But
I've no idea how to define it.
For example using document.getElementById() if the `x' element had an ID.
Please look into publicly available DOM documentations already mentioned.
These are very basic questions and, frankly, asking them repeatedly does
not make you look very smart.
I guess 'x' has to be the same letter like in
x.style-tableentry-middle {
Correct?
You do not have to provide the element type for a selector, the class name
suffices here. Please read the first chapters of the CSS2 specification
and other publicly available documentation about CSS, this is off-topic
here.
Here is my code (only the Javascript part, the whole code is in my first
post):
===========================
function InsertRow() {
Still the identifier starts with a capital letter although the method is
not a constructor. As I already mentioned, it's not a syntax error, of
course, but a matter of code style.
var xtable
Still you do not end statements with a semicolon. Another sign of
discouraged code style.
[...]
xtable = document.getElementById("MyTable")
// Add row
xrow = xtable.insertRow(2)
Still you don't do feature tests consequently which is potentially harmful.
[...]
xcell.style.width = "40%"
xcell.bgColor = "#ff8800"
`bgColor' is a proprietary attribute and property. Use
xcell.style.backgroundColor = "#f90";
instead and be sure to also define the foreground color with the `color'
property. <http://www.w3.org/QA/Tips/color>
[...]
var p, t;
if (isMethod("x.appendChild") // feature test
&& isMethod("document.createElement") // feature test
&& (p = document.createElement("p"))) { // object reference
test
Code should be executable as posted. The `test' belongs to the single-line
comment before.
[...]
if (isMethod("p.appendChild") //
feature test
Same here. Just copy'n'pasting (my) code (BTW without even mentioning
it's originated from me, which I find rather offensive!) without really
trying to understand what it does will not help you in the mid-term.
[...] because with my knowledge I'm not able to handle it.
So read, get informed, try and learn, as everybody else now considered
competent once did. This newsgroup (and me) is not a machine producing
error corrections and sophisticated source code at no effort on your side.
That said, I can only hope your sender address does not reflect your
attitude about this.
PointedEars
P.S.
Unfortunately, one cannot contact you privately via e-mail:
<se**************@yahoo.com>:
67.28.113.10_failed_after_I_sent_the_message./Remote_host_said:_554_delivery_error:_dd_This_user _doesn't_have_a_yahoo.com_account_(se************* *@yahoo.com)_[-14]_-_mta103.mail.re2.yahoo.com/
Forging headers is a disregardment of Netiquette and a violation of
Internet Standards. It helps spammers instead of fighting them. I
will no longer read your postings or reply to them until you stop
this kind of network abuse.
> Code should be executable as posted. The `test' belongs to the single-line
comment before.
I copied your code like you posted it. It must be my newsreader who did
these line breaks.
If you have not much knowlegde (like me) so you always use the posted code
before you modify it.
Unfortunately, one cannot contact you privately via e-mail:
<se**************@yahoo.com>:
67.28.113.10_failed_after_I_sent_the_message./Remote_host_said:_554_delivery_error:_dd_This_user _doesn't_have_a_yahoo.com_account_(se************* *@yahoo.com)_[-14]_-_mta103.mail.re2.yahoo.com/
At the beginning I used my real e-mail address. Within one month I got
countless spam mails because of tool which scan the newsgroups for email
addresses. So I was told to use something in the e-mail address
like -remove- so every human being can contact you but not a machine. I
think this is quite common.
I really don't know why you didn't remove the -remove- part.
Stefan This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: toylet |
last post by:
Attached is some css codes for a website. It has 3 parts: top-bar,
side-bar (on the left) and main-body. The top-bar has a mouseover menu
called top-menu implemented via ul:hover.
When the mouse...
|
by: hawat.thufir |
last post by:
cross-posted to: mailing.database.myodbc,comp.text.xml
I have an xhtml file whose data I'd like to import to MySQL.
Unfortunately, mysqlimport will only work with text files. Mixed in
with text...
|
by: hawat.thufir |
last post by:
Given an xhtml file, how can I "export" the data to plain-text? That is,
I want:
google www.google.com
Whereas, if I copy and paste what the browser shows, I lose the URL and
end up with:...
|
by: jhurrell |
last post by:
I have been having some trouble getting my XSL style sheet to parse correctly.
I have some XML outputted from an SQL-Server, that I then need to turn into multiple HTML files. This I have done...
|
by: greentiger1 |
last post by:
I'm moderately experienced in CSS.
I am currently working on a new version of my site, built from the
ground up, but the dynamic portion, loaded with a PHP include into the
'chest' DIV is being...
| | |
by: shalini jain |
last post by:
Hi, I want to know how can we do pagination using XSL. There are number of tutorials available on pagination using PHP but nothing with XSL. i am really stuck with my code.
Below is the code that...
|
by: nathj |
last post by:
Hi All,
I'm working on a new site that has a two column layout underneath a title bar. If you check out:
http://www.christianleadership.org.uk/scratch/mainpage.php
using IE or Opera you will...
|
by: malathib |
last post by:
Hi,
I have used a rich text editor in my application. I got it from one of the site.all are JS files.
My problem is, i want to call a javascript function from the iframe.
Can anybody help...
|
by: matheussousuke |
last post by:
Hello, I'm using tiny MCE plugin on my oscommerce and it is inserting my website URL when I use insert image function in the emails.
The goal is: Make it send the email with the URL...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
| | |
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...
| |
