creating a table

J

judi

Hello,
i have created a table like this. Now I want to create multiple rows
each with two cells using a for loop.

function t(){

var x=document.getElementById('vorschau').insertRow(0);

var y=x.insertCell(0);
var z=x.insertCell(1);
y.innerHTML="NEW CELL1";
z.innerHTML="NEW CELL2";
x.style.width="100px";
x.style.height="280px";
x.style.border="1px solid black";
x.style.align="top";
}
</script>
</head>

<body onload="t();">
<div id="Seite">

<div id="Inhalt_l">
<table id="vorschau">

</table>

I uncertain how to do. Something like this:
for (var i=0;i<=4;i++){
document.getElementById('vorschau').insertRow(0);
....
}

Would be very happy about an explanation. Another problem is that the
border is not shown and the text is not on the top
(x.style.align="top";).
 
R

RobG

Hello,
i have created a table like this. Now I want to create multiple rows
each with two cells using a for loop.

function t(){

var x=document.getElementById('vorschau').insertRow(0);

var y=x.insertCell(0);
var z=x.insertCell(1);
y.innerHTML="NEW CELL1";
z.innerHTML="NEW CELL2";
x.style.width="100px";
x.style.height="280px";
x.style.border="1px solid black";
x.style.align="top";}

</script>
</head>

<body onload="t();">
<div id="Seite">

<div id="Inhalt_l">
<table id="vorschau">

</table>

I uncertain how to do. Something like this:
for (var i=0;i<=4;i++){
document.getElementById('vorschau').insertRow(0);
...

}

The example here might help:

<URL: https://developer.mozilla.org/en/Ge...ples#Example_8:_Using_the_DOM_Table_Interface
Note that insertRow and insertCell are convenient, but very slow in IE
compared to using createElement and appendChild (a classic case of
more code is significantly faster).

Would be very happy about an explanation. Another problem is that the
border is not shown

Note that there are differences between HTML attributes that are used
for presentation and properties of an element's associated style
object. HTML attributes can be accessed directly as properties of DOM
elements, so:

x.width = "100px";

In this case the relevant CSS style property is the same, so:

x.style.width = "100px";

has a similar effect. However, CSS rules are only suggestions to the
browser on how to display the element, the browser can choose to not
adopt them. There may be some other rule or setting that is
preventing the width and height from changing when you set them.

For a border, the CSS rule requires weight, style and colour so:

x.style.border = "5px solid black";

or you can set each side independently:

x.style.borderLeft = ....
x.style.borderRight = ....
x.style.borderTop = ....
x.style.borderBottom = ....

and so on.
and the text is not on the top
(x.style.align="top";).

A couple of reasons: the HTML attribute you are looking for is valign
and also you are trying to set the DOM element property, not the style
property or the HTML attribute so:

x.vAlign = 'top';

you can try to use:

x.setAttribute('valign', 'top');

but you'll discover IE's broken setAttribute implementation. If you
want to set the style property using the appropriate CSS property,
then you want to use vertical-align, which is mapped to the
verticalAlign property so:

x.style.verticalAlign = 'bottom';


HTH :)
 
T

Thomas 'PointedEars' Lahn

RobG said:
Note that there are differences between HTML attributes that are used
for presentation and properties of an element's associated style
object. HTML attributes can be accessed directly as properties of DOM
elements, so:

x.width = "100px";

In this case the relevant CSS style property is the same, so:

x.style.width = "100px";

has a similar effect.

Nonsense. "px" does _not_ belong in the HTML attribute property value which
MUST be an integer number or a percentage (however, the possibility of "%"
forces the DOMString type in the interface and thus string is recommended
for ECMAScript implementations). It belongs only in the length-type CSS
property value which (therefore) is of type DOMString in the interface and
SHOULD be a string in ECMAScript implementations

<http://www.w3.org/TR/html4/struct/tables.html#h-11.2.1>
<http://www.w3.org/TR/html4/types.html#type-length>
<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64060425>
<http://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html>
<http://www.w3.org/TR/CSS21/visudet.html#propdef-width>
<http://www.w3.org/TR/CSS21/syndata.html#value-def-length>
<http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties>
However, CSS rules are only suggestions to the
browser on how to display the element, the browser can choose to not
adopt them.

The same applies to HTML attribute values.
There may be some other rule or setting that is
preventing the width and height from changing when you set them.

The same applies to HTML attribute values.
For a border, the CSS rule requires weight, style and colour so:

x.style.border = "5px solid black";

That is what failed already, didn't it.
or you can set each side independently:

x.style.borderLeft = ....
x.style.borderRight = ....
x.style.borderTop = ....
x.style.borderBottom = ....

and so on.

That is what might be required if assigning to the `border' property fails.
MSHTML is known to require this.
A couple of reasons: the HTML attribute you are looking for is valign

No, they are looking for the CSS property value, verticalAlign="top".
and also you are trying to set the DOM element property, not the style
property or the HTML attribute so:

x.vAlign = 'top';

you can try to use:

x.setAttribute('valign', 'top');

but you'll discover IE's broken setAttribute implementation.

[verticalAlign="top"]

Sure, why not set clueless newbies on the wrong track at first. It's not as
if that would confuse the hell out of them ...

Hardly.


PointedEars
 
R

RobG

Nonsense.

So the effect isn't similar?

"px" does _not_ belong in the HTML attribute property

Quite right, but that is not what you were saying "nonsense" to.

value which
MUST be an integer number

"Must" in the context of conformance to the HTML spec, not in terms of
what some browsers accept.

[...]
That is what failed already, didn't it.

Yes, your point being?

That is what might be required if assigning to the `border' property fails.
MSHTML is known to require this.

"Known" to whom? And for which versions of IE (or which MSHTML
implementations)? It is not required for IE 6, the border can be set
with a single rule per the OP's initial line of code.

No, they are looking for the CSS property value, verticalAlign="top".

Keep reading, that is what I suggested.

and also you are trying to set the DOM element property, not the style
property or the HTML attribute so:
x.vAlign = 'top';
you can try to use:
x.setAttribute('valign', 'top');
but you'll discover IE's broken setAttribute implementation.
[verticalAlign="top"]

Sure, why not set clueless newbies on the wrong track at first.

What makes you think the OP is a "clueless newbie"?

It's not as
if that would confuse the hell out of them ...

Without your trimming, I don't expect it would. If the OP really is a
"clueless newbie" (the quality of the post suggests otherwise), do you
think they should remain in the dark? Or, in a discussion about
setting HTML attributes and DOM element properties, that they should
be advised of the vagaries of setAttribute?


Stop groaking, that was for the OP.
 
T

Thomas 'PointedEars' Lahn

RobG said:
So the effect isn't similar?

Not even remotely.
Quite right, but that is not what you were saying "nonsense" to.

I called the whole section nonsense.
"Must" in the context of conformance to the HTML spec, not in terms of
what some browsers accept.

Acceptance is not sufficient for a working (and cross-browser) solution.
Yes, your point being?

What sense does it make to suggest a solution that already failed?
"Known" to whom? And for which versions of IE (or which MSHTML
implementations)? It is not required for IE 6, the border can be set
with a single rule per the OP's initial line of code.

I can't test right know (the current WINE version seems to have a bit of a
problem) but I might have confused this with the `margin' properties.
Keep reading, that is what I suggested.

Keep reading, that is why I summarized it instead of snipping.
and also you are trying to set the DOM element property, not the style
property or the HTML attribute so:
x.vAlign = 'top';
you can try to use:
x.setAttribute('valign', 'top');
but you'll discover IE's broken setAttribute implementation.
[verticalAlign="top"]
Sure, why not set clueless newbies on the wrong track at first.

What makes you think the OP is a "clueless newbie"?

| var y=x.insertCell(0);
| var z=x.insertCell(1);
| y.innerHTML="NEW CELL1";
| z.innerHTML="NEW CELL2";
|
| [...]
| I uncertain how to do. Something like this:
| for (var i=0;i<=4;i++){
| document.getElementById('vorschau').insertRow(0);
| ....
| }
Without your trimming, I don't expect it would. If the OP really is a
"clueless newbie" (the quality of the post suggests otherwise), do you
think they should remain in the dark? Or, in a discussion about
setting HTML attributes and DOM element properties, that they should
be advised of the vagaries of setAttribute?

It has been my experience that inexperienced people should not be told about
potential problems with the things they do not do yet because that confuses
them more than that it enlightens them.
Stop groaking,
Pardon?

that was for the OP.

Hence my comment.


PointedEars
 
R

RobG

Not even remotely.

From you perspective, perhaps. The effect, as far as a user is
concerned, is identical. The consequences to the DOM are different,
and were explained in simple terms - hence my statement that the
effect (that is, the observed change to the user) is similar.

I called the whole section nonsense.

Because I forgot to trim 'px' from a single expression? By all means
point out the error, but that doesn't invalidate the entire section.

Acceptance is not sufficient for a working (and cross-browser) solution.

It is sufficient to challenge your unsubstantiated "MUST".

What sense does it make to suggest a solution that already failed?

To confirm that the OP's syntax was OK and that setting the border
requires a quite different value to setting the height or width. Has
the OP shown any confusion?

I can't test right know (the current WINE version seems to have a bit of a
problem) but I might have confused this with the `margin' properties.

Perhaps, I think that is your way of saying "I was wrong about that".

Keep reading, that is why I summarized it instead of snipping.

And chose to comment out of context.
and also you are trying to set the DOM element property, not the style
property or the HTML attribute so:
  x.vAlign = 'top';
you can try to use:
  x.setAttribute('valign', 'top');
but you'll discover IE's broken setAttribute implementation.
[verticalAlign="top"]
Sure, why not set clueless newbies on the wrong track at first.
What makes you think the OP is a "clueless newbie"?

| var y=x.insertCell(0);
| var z=x.insertCell(1);
| y.innerHTML="NEW CELL1";
| z.innerHTML="NEW CELL2";
|
| [...]
| I uncertain how to do. Something like this:
| for (var i=0;i<=4;i++){
| document.getElementById('vorschau').insertRow(0);
| ....
| }

No summarising here. The OP has pretty much followed netiquette in
regard to posting code and explaining the issue, so even though the
code is basic and clearly the OP is new to javascript, the overall
post doesn't show cluelessness to me.

Would you rather they headed over to a jQuery or Prototype.js group?

It has been my experience that inexperienced people should not be told about
potential problems with the things they do not do yet because that confuses
them more than that it enlightens them.

My experience has been quite different - first impressions count.
Many programmers are used to set and get methods, ensuring they are
forewarned about issues with setAttribute means they will take advice
to use it with some skepticism. Getting helpful, friendly advice
might even encourage them to come back to seek further assistance when
the need arises.
 
T

Thomas 'PointedEars' Lahn

RobG said:
From you perspective, perhaps. The effect, as far as a user is
concerned, is identical.

It is not. For starters, there is no definition or agreement as to which
should take precedence if both a presentational attribute value and a style
sheet property define the layout of an element. There is no definition or
agreement as to what the "!important" keyword in a style sheet means then, too.
The consequences to the DOM are different,

The consequences to the DOM reach as far as an exception be thrown on
assignment. We are dealing with host objects here.
and were explained in simple terms - hence my statement that the
effect (that is, the observed change to the user) is similar.

It is not.
Because I forgot to trim 'px' from a single expression?

So now you accidentally forgot to trim it while above you state that it
works anyway. How convenient. Who exactly are you trying to fool here?
It is sufficient to challenge your unsubstantiated "MUST".

It isn't as it is not unsubstantiated. RTFM.
To confirm that the OP's syntax was OK and that setting the border
requires a quite different value to setting the height or width.

That the border is _not_ shown with their syntax (that you say would be "OK"
anyway) has nothing to do with the `width' or `height' properties. It has
to do with the `border-collapse' property of the table.
Has the OP shown any confusion?

Have you?
Perhaps, I think that is your way of saying "I was wrong about that".

Believe what you wish.
And chose to comment out of context.

*In context.* Stop whining.
and also you are trying to set the DOM element property, not the style
property or the HTML attribute so:
x.vAlign = 'top';
you can try to use:
x.setAttribute('valign', 'top');
but you'll discover IE's broken setAttribute implementation.
[verticalAlign="top"]
Sure, why not set clueless newbies on the wrong track at first.
What makes you think the OP is a "clueless newbie"?
| var y=x.insertCell(0);
| var z=x.insertCell(1);
| y.innerHTML="NEW CELL1";
| z.innerHTML="NEW CELL2";
|
| [...]
| I uncertain how to do. Something like this:
| for (var i=0;i<=4;i++){
| document.getElementById('vorschau').insertRow(0);
| ....
| }

No summarising here.
Pardon?

The OP has pretty much followed netiquette in regard to posting code
and explaining the issue,

That doesn't have anything to do with the content of their code.
so even though the code is basic and clearly the OP is new to javascript,

So a *new*bie? Maybe a *clueless* one, if they use `innerHTML' for text
content?
the overall post doesn't show cluelessness to me.

Look closer.
Would you rather they headed over to a jQuery or Prototype.js group?

I'd rather they not be confused by irrelevance so that they stay here.
Which you failed to provide.
My experience has been quite different - first impressions count.
Many programmers are used to set and get methods, ensuring they are
forewarned about issues with setAttribute means they will take advice
to use it with some skepticism. Getting helpful, friendly advice
might even encourage them to come back to seek further assistance when
the need arises.

Non sequitur.

When and *if* they start using setAttribute() then is the time to tell
them about the problems that come with that approach. Same for vAlign,
which is *deprecated*.


PointedEars
 
T

Thomas 'PointedEars' Lahn

Thomas said:
That the border is _not_ shown with their syntax (that you say would be "OK"
anyway) has nothing to do with the `width' or `height' properties. It has
to do with the `border-collapse' property of the table.


Have you?


Believe what you wish.

After a libc6 update and a reboot (whereas the latter, given that killing
wineserver, explorer.exe and IEXPLORE.EXE manually also helps now, would
probably have been the solution), IE 5 and 6 are running again on WINE (in a
manner of speaking; I still have to kill their occasional memory hunger with
a hearty SysRq-f).

And, in fact, my tests showed that my confusion was a different one: IE 5
and 6 *do support* the `border' property as-is both in Standards Compliance
and in Quirks Mode.

But they *do not support* it (or any of the `border*' properties') in
neither mode for table *rows* (scripting or not), which is what the OP
attempted. Quote:

var x=document.getElementById('vorschau').insertRow(0);
// ...
x.style.border="1px solid black";

I could also confirm my assumption about the `border-collapse' CSS property
of the table (`borderCollapse' in scripting).

So for compatibility with MSHTML it appears to be necessary to apply the
border on the table cells of the row instead, and using the `borderCollapse'
CSS property of the table so that it looks as if the border was around the row:

/**
* Sets the border of a table row compatible with MSHTML 5 and 6.
*
* @param oTable : HTMLTableElement
* @param oTR : HTMLTableRowElement
* @param sBorder: string
* <code>border</code> property value, e.g. "1px solid red"
* @return boolean
* <code>false</code> on missing or invalid arguments,
* <code>true</code> otherwise.
* @author
* (c) 2009 Thomas 'PointedEars' Lahn &lt;[email protected]&gt;
* Distributed under the GNU GPL v3 and later.
*/
function setTableRowBorder(oTable, oTR, sBorder)
{
if (!oTable || !oTR) return false;

var cs = x.cells, len;

if (cs && (len = cs.length))style
{
oTable.style.borderCollapse = "collapse";

cs[0].style.borderLeft = sBorder;

for (var i = len; i--;)
{
var oStyle = cs.style;
oStyle.borderTop = oStyle.borderBottom = sBorder;
}

cs[len - 1].style.borderRight = sBorder;
}

return true;
}

var t = document.getElementById('vorschau');

// var x = ...

setTableRowBorder(t, x, "1px solid red");

Untested (live testing is a PITA in Firebug Lite because it has only a
single-line console prompt, and I don't have more time to set up a test case
right now).

If that does not help it would appear to be best that the OP provides a test
case and names the exact browser versions in which the observed behavior
occurred.


PointedEars
 
T

Thomas 'PointedEars' Lahn

Thomas said:
function setTableRowBorder(oTable, oTR, sBorder)
{
if (!oTable || !oTR) return false;

var cs = x.cells, len;

Must be oTR.cells, of course. Refactoring error.


PointedEars
 
J

judi

Hello together,

thank you very much for your answers! Your discussion was very
interesting to read and make me smile a bit ;)
You can call me a "newby", "starter", "a clueless one" - that's ok!
Especially concernig HTML DOM.

I am advanced enough to know the problem with the different browsers,
so the tips were not for the garbage.

as the tutorials of w3school propose I use now this:
x.style.border="1px solid black";
x.style.verticalAlign="top";

Now I will continue to experiment with my table problem and improve my
raw beginner code.....you will hear from me soon ;)
 
T

Thomas 'PointedEars' Lahn

judi said:
I am advanced enough to know the problem with the different browsers,
so the tips were not for the garbage.

How come that you are still doing something stupid like this then:
as the tutorials of w3school propose I use now this:
x.style.border="1px solid black";
x.style.verticalAlign="top";

The "tutorials" on w3schools.com are (evidently) junk (search the archives),
and unsurprisingly this isn't a solution to your border problem at all.
It's just that the `border' property (and IIRC also the `verticalAlign'
property) does not work with all elements in all HTML user agents. For
example, it evidently does not work with table rows in the (unfortunately)
most relevant UA of MSHTML (5 and 6, probably 7, maybe 8) but it does work
with table cells (as I have pointed out already).

And as for the whole thing, isn't it just a whole lot more efficient and
reliable to use a global style sheet instead?
Now I will continue to experiment with my table problem and improve my
raw beginner code.....you will hear from me soon ;)

When you have made the step from copy-pasting from dubious sources without
understanding, to trying something out because you understand it to work
that way (even if that understanding may be wrong), then you will have made
it from neophyte to beginner.


PointedEars
 
G

GTalbot

Hello,
i have created a table like this. Now I want to create multiple rows
each with two cells using a for loop.

function t(){

var x=document.getElementById('vorschau').insertRow(0);

var y=x.insertCell(0);
var z=x.insertCell(1);
y.innerHTML="NEW CELL1";
z.innerHTML="NEW CELL2";
x.style.width="100px";
x.style.height="280px";
x.style.border="1px solid black";
x.style.align="top";}


Judi,

The consecutive DOM instructions
var x=document.getElementById('vorschau').insertRow(0);
var y=x.insertCell(0);
will fail in Internet Explorer 6 and in Internet Explorer 7.
I reported this bug to Microsoft IE team about 2 years ago:
http://www.gtalbot.org/BrowserBugsSection/MSIE6Bugs/InsertRowNotWorking.html
Microsoft IE team fixed that bug in Internet Explorer 8.

A complete workaround can be found in the source code of this complete
example:

http://www.gtalbot.org/DHTMLSection/CreatingTable.html

On top of RobG's suggestions, I recommend to use

y.appendChild(document.createTextNode("NEW CELL1"));

instead of y.innerHTML. innerHTML should be used only to create HTML
code, not when one wants to insert just text, to just create a text
node.

Another coding practice I recommend: use meaningful, self-explanatory,
intuitive variable names. x, y and z refers to nothing in the
absolute; objTableRow, objTableCell are meaningful, self-explanatory,
intuitive variable names.

regards, Gérard
 
T

Thomas 'PointedEars' Lahn

GTalbot said:
The consecutive DOM instructions
var x=document.getElementById('vorschau').insertRow(0);
var y=x.insertCell(0);
will fail in Internet Explorer 6 and in Internet Explorer 7.

You must be mistaken because that actually works (the variables are assigned
the correct values and it is possible to access y.innerHTML and the like
afterwards) in my Internet Explorer 6 both in Compatibility Mode and in
Quirks Mode. UA string is "Mozilla/4.0 (compatible; MSIE 6.0; Windows 98)"
which is standalone IE 6 from IEs4Linux (uses the evolt.org browser archive).
I reported this bug to Microsoft IE team about 2 years ago:
http://www.gtalbot.org/BrowserBugsSection/MSIE6Bugs/InsertRowNotWorking.html
Microsoft IE team fixed that bug in Internet Explorer 8.

I can confirm the bug for my IE 6 with your test case; the major difference
to my test case appears to be that you are calling the insertRow() method of
a HTMLTableSectionElement object, the tbody element object, instead. The OP
also did not do that; "vorschau" is the ID of a table element.


PointedEars
 
J

judi

Judi,

The consecutive DOM instructions
var x=document.getElementById('vorschau').insertRow(0);
var y=x.insertCell(0);
will fail in Internet Explorer 6 and in Internet Explorer 7.
I reported this bug to Microsoft IE team about 2 years ago:http://www.gtalbot.org/BrowserBugsSection/MSIE6Bugs/InsertRowNotWorki...
Microsoft IE team fixed that bug in Internet Explorer 8.

A complete workaround can be found in the source code of this complete
example:

http://www.gtalbot.org/DHTMLSection/CreatingTable.html

On top of RobG's suggestions, I recommend to use

y.appendChild(document.createTextNode("NEW CELL1"));

instead of y.innerHTML. innerHTML should be used only to create HTML
code, not when one wants to insert just text, to just create a text
node.

Another coding practice I recommend: use meaningful, self-explanatory,
intuitive variable names. x, y and z refers to nothing in the
absolute; objTableRow, objTableCell are meaningful, self-explanatory,
intuitive variable names.

regards, Gérard
--
Internet Explorer 8 bugs:http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/
Internet Explorer 7 bugs:http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/- Zitierten Text ausblenden -

- Zitierten Text anzeigen -


thanks, GTalbot,

following your advise I have now this:

function createTable() {

var vorschau=document.getElementById("Inhalt_l")
var table =document.createElement("table");
var tb = document.createElement("tbody");
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");

var text1=document.createTextNode("Content");
var text2=document.createTextNode("Content2");

td1.appendChild(text1);
td2.appendChild(text2);
tr.appendChild(td1);
tr.appendChild(td2);
tbody.appendChild(tr);
table.appendChild(tbody);

vorschau.appendChild(table);
}

<body onload="createTable();">
<div id="Seite">
<div id="Inhalt_l">
</div>
</div>

but text1 and text2 are not displayed in div "Inhalt_l.
 
J

judi

How come that you are still doing something stupid like this then:


The "tutorials" on w3schools.com are (evidently) junk (search the archives),
and unsurprisingly this isn't a solution to your border problem at all.
It's just that the `border' property (and IIRC also the `verticalAlign'
property) does not work with all elements in all HTML user agents.  For
example, it evidently does not work with table rows in the (unfortunately)
most relevant UA of MSHTML (5 and 6, probably 7, maybe 8) but it does work
with table cells (as I have pointed out already).

And as for the whole thing, isn't it just a whole lot more efficient and
reliable to use a global style sheet instead?

it is a matter of learning all possibilities
When you have made the step from copy-pasting from dubious sources without
understanding, to trying something out because you understand it to work
that way (even if that understanding may be wrong), then you will have made
it from neophyte to beginner.

PointedEars

quite unnecessary comment....
 
T

Thomas 'PointedEars' Lahn

judi said:
it is a matter of learning all possibilities

That statement doesn't refer to my rebuttal or answers my question in the
slightest.
quite unnecessary comment....

Quite the contrary, also given the recent and completely unnecessary change
of your code which effectively breaks its basic functionality[1]. As long
as you believe everything that you read without even attempts at
verification, you are beyond help.

[1] <
You really should read Richard Cornford's recent observations about
overconfidence in the JavaScript learning process.

And learn to quote: <http://jibbering.com/faq/#posting>


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,770
Messages
2,569,584
Members
45,077
Latest member
SangMoor21

Latest Threads

Top