Javascript in an HTML table

J

James Kimble

Yeah I'm sure this is a stupid question.

I've got a javascript source file with functions (creates a bar graph)
I want to call from inside an html table cell so that the graph
appears in the cell. I've tried a bunch of different things but I'm
not getting it. I'm a newbee to both html and javascript so be kind.

Any example would be appreciated.


My current attempt looks like:

<head>
<script language="JavaScript" src="bargraph.js"></script>
<script language="JavaScript">
function createBarGraph() {
graph = new BarGraph("HorizBar");
graph.values = "1000";
document.write(graph.create());
}
</script>
</head>
<body onLoad="createBarGraph()">
<table width="100%" border="0">
<tr>
<td>HPX40</td>
<td>CUSTOMER DEFINED TEXT </td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Plate Status:</td>
<td><form name="f1" action="javascript:createBarGraph()"
method="post"></td>
<td>40.5KW</td>
</tr>
</table>
</body>

This just displays my graph by itself. No other table items appear.
 
J

Jeremy J Starcher

Yeah I'm sure this is a stupid question.

I've got a javascript source file with functions (creates a bar graph) I
want to call from inside an html table cell so that the graph appears in
the cell. I've tried a bunch of different things but I'm not getting it.
I'm a newbee to both html and javascript so be kind.

Any example would be appreciated.


My current attempt looks like:

<head>
<script language="JavaScript" src="bargraph.js"></script>
<script language="JavaScript">
function createBarGraph() {
graph = new BarGraph("HorizBar");
graph.values = "1000";
document.write(graph.create());
}
</script>
</head>
<body onLoad="createBarGraph()">
<table width="100%" border="0">
<tr>
<td>HPX40</td>
<td>CUSTOMER DEFINED TEXT </td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Plate Status:</td>
<td><form name="f1" action="javascript:createBarGraph()"
method="post"></td>
<td>40.5KW</td>
</tr>
</table>
</body>

This just displays my graph by itself. No other table items appear.
Click to expand...

This is correct, though unexpected, behavior.

If you call "document.write" WHILE THE PAGE IS LOADING, then it will kind
of 'slip' stuff into your web page.

However, you are calling it AFTER the page has loaded, which will REPLACE
the contents of your page with the new information. Many folks consider
document.write problematic at best recommend avoiding it.

In addition, the coding style that you are using is very obsolete. You
might want to consider reading this:

<URL: http://www.mopedepot.com/jjs/HowToRecognizeBadJavascriptCode.html >
 
J

James Kimble

Ok, but what would be the correct way to do this (ie. show the table
with the graph in it)?
 
J

Jeremy J Starcher

On Fri, 06 Jun 2008 09:58:15 -0700, James Kimble wrote:

[Posting order restored. Please don't top-post on USENET]

[Code snipped]
Ok, but what would be the correct way to do this (ie. show the table
with the graph in it)?
Click to expand...

The correct way would be to use the DOM methods to create elements and
insert them into the document, or to create the graph server-side.

<URL: http://www.quirksmode.org/dom/intro.html >

you might also get away with using innerHTML, but I have been getting
away from that.
 
J

James Kimble

On Fri, 06 Jun 2008 09:58:15 -0700, James Kimble wrote:

[Posting order restored. Please don't top-post on USENET]



[Code snipped]
Ok, but what would be the correct way to do this (ie. show the table
with the graph in it)?
Click to expand...

The correct way would be to use the DOM methods to create elements and
insert them into the document, or to create the graph server-side.

<URL:http://www.quirksmode.org/dom/intro.html>

you might also get away with using innerHTML, but I have been getting
away from that.
Click to expand...

Not big on examples are ya.....

I'm really just trying to throw something together. Getting it done in
the purest form of correctness is not required or even particularly
desirable because this is to be a rough demo. Not a finished product.
This seems like it should be a "really" simple thing to do and yes,
I'm being lazy about learning the languages because I don't use them
and never intend to use them much (I work in C and Java mostly in the
embedded environment).

So I guess I'll go to the book store and do a little reading. I do
appreciate your guidance but I was really just looking for a simple
"do this" type response to the snippet of code I posted. I realize
it's better to teach how to fish rather than just give a fish but, in
this case, I never wanted to be a fisherman 'cause I'm eating pretty
well on the king crab I catch in my part of the ocean.

Thank you anyway.....
 
T

Thomas 'PointedEars' Lahn

James said:
Not big on examples are ya.....
Click to expand...

Usenet is not a right.
[...]
This seems like it should be a "really" simple thing to do and yes,
Click to expand...

How could you even know?
I'm being lazy about learning the languages because I don't use them
and never intend to use them much (I work in C and Java mostly in the
embedded environment).
Click to expand...

But with this attitude you are not likely to get a straight answer out of
anyone who can be taken seriously around here because it is like asking them
to do your homework in their leisure time for free. You are looking for
someone who you can pay for the answer instead.

See also:

http://jibbering.com/faq/
http://www.catb.org/~esr/faqs/smart-questions.html


PointedEars
 
T

Tom de Neef

James Kimble said:
Yeah I'm sure this is a stupid question.
Click to expand...
There are no stupid questions. There are only stupid answers.
I've got a javascript source file with functions (creates a bar graph)
I want to call from inside an html table cell so that the graph
appears in the cell. I've tried a bunch of different things but I'm
not getting it. I'm a newbee to both html and javascript so be kind.

Any example would be appreciated.


My current attempt looks like:

<head>
<script language="JavaScript" src="bargraph.js"></script>
<script language="JavaScript">
function createBarGraph() {
graph = new BarGraph("HorizBar");
graph.values = "1000";
document.write(graph.create());
}
</script>
</head>
<body onLoad="createBarGraph()">
<table width="100%" border="0">
<tr>
<td>HPX40</td>
<td>CUSTOMER DEFINED TEXT </td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Plate Status:</td>
<td><form name="f1" action="javascript:createBarGraph()"
method="post"></td>
<td>40.5KW</td>
</tr>
</table>
</body>

This just displays my graph by itself. No other table items appear.
Click to expand...

Some suggestions:
<head>
<script type="text/JavaScript" src="bargraph.js"></script>
function createBarGraph() {
graph = new BarGraph("HorizBar");
graph.values = "1000";
return graph.create()
}
</script>
</head>

Chech the <script> tag for its attributes
document.write removed. Its intention is to replace the current page. That
is not what you want. The function now returns the (html) string produced by
graph.create(). At least I guess that's what graph.create() will return.
But you need more: you want to place this text inside a table cell.
Conceptually, the html - as a string - would read like this:
'<td>'+createBarGraph()+'</td>'. You can make this happen if you can
identify the table cell. So, give it an ID, like
<table>
<tr>
<td> Plate Status:</td>
<td id=graphcell> </td>
<td>40.5KW</td>
</tr>
</table>
That cell will be empty when loaded. In the onLoad handler you now call
script code that will fill the cell with your graph.
I.e. you could do with another function within your script:
function placeGraph(id)
{ var cell = document.getElementById(id)
cell.innerHTML = createBarGraph()
}

and with
<body onLoad="placeGraph('graphcell')">
it should work.

Of course, you can combine these things and use
<body
onLoad="document.getElementById(graphcell).innerHTML=createBarGraph()">
and do without the extra function if you really want to push your code on
the track of unmaintainability.
Tom
 
T

Thomas 'PointedEars' Lahn

Tom said:
There are no stupid questions. There are only stupid answers.
Click to expand...

Such as yours?
[...]
This just displays my graph by itself. No other table items appear.
Click to expand...

Some suggestions:
<head>
<script type="text/JavaScript" src="bargraph.js"></script>
Click to expand...

The said:
function createBarGraph() {
graph = new BarGraph("HorizBar");
Click to expand...

`graph' should be declared a variable, globally if used outside of
createBarGraph(), locally if not.

// global declaration
var graph;

or

// local declaration and initialization;
var graph = new BarGraph(...);
graph.values = "1000";
return graph.create()
Click to expand...

The trailing `;' is missing; it is optional here, but recommended.
}
</script>
</head>

Chech the <script> tag for its attributes
Click to expand...

You should be more precise and more verbose about your suggestions. The
point here is that the `type' attribute is required for the `script'
_element_, and it was not provided yet which renders the markup invalid.
document.write removed. Its intention is to replace the current page.
Click to expand...

There is no intention of a method in itself; *people* have intentions. What
document.write() does, however, depends on where and when it is used, as
already explained before. (Please try to read all accessible postings of a
thread before you are posting late to it.)
That is not what you want.
True.

The function now returns the (html) string produced by
graph.create(). At least I guess that's what graph.create() will return.
Click to expand...

But this is the major problem with this question. One can only guess
because the OP is not verbose enough.
[...]
<td id=graphcell> </td>
Click to expand...

All attribute values should be quoted.
[...]
That cell will be empty when loaded. In the onLoad handler you now call
script code that will fill the cell with your graph.
I.e. you could do with another function within your script:
function placeGraph(id)
{ var cell = document.getElementById(id)
cell.innerHTML = createBarGraph()
}

and with
<body onLoad="placeGraph('graphcell')">
it should work.
Click to expand...

However, without further feature tests this is just a big overhead.
Of course, you can combine these things and use
<body
onLoad="document.getElementById(graphcell).innerHTML=createBarGraph()">
Click to expand...

Needs to be

onLoad="document.getElementById('graphcell').innerHTML=createBarGraph()">

for a remote chance of working. However, it would be better if
createBarGraph() and consequently graph.create() returned a reference to a
DOM Node object so that it can be inserted as child node of the element node
referred to by the equivalent of document.getElementById('graphcell'), and
maybe replace existing child nodes. (Maybe this is already the case so that
it could not be done by the OP without learning about DOM mutator methods.)
and do without the extra function if you really want to push your code on
the track of unmaintainability.
Click to expand...

With your approach it is on that track already.


PointedEars
 
T

Thomas 'PointedEars' Lahn

[previous posting superseded in the face of new evidence]
There are no stupid questions. There are only stupid answers.
Click to expand...

Such as yours?
[...]
This just displays my graph by itself. No other table items appear.
Click to expand...
Click to expand...

Some suggestions:
<head>
<script type="text/JavaScript" src="bargraph.js"></script>
Click to expand...

The said:
function createBarGraph() {
graph = new BarGraph("HorizBar");
Click to expand...

`graph' should be declared a variable, globally if used outside of
createBarGraph(), locally if not.

// global declaration
var graph;

or

// local declaration and initialization
var graph = new BarGraph(...);
graph.values = "1000";
return graph.create()
Click to expand...

The trailing `;' is missing; it is optional here, but recommended.
}
</script>
</head>

Chech the <script> tag for its attributes
Click to expand...

You should be more precise and more verbose about your suggestions. The
point here is that the `type' attribute is required for the `script'
_element_, and it was not provided yet which renders the markup invalid.
document.write removed. Its intention is to replace the current page.
Click to expand...

There is no intention of a method in itself; *people* have intentions. What
document.write() does, however, depends on where and when it is used, as
already explained before. (Please try to read all accessible postings of a
thread before you are posting late to it.)
That is not what you want.
True.

[...]
<td id=graphcell> </td>
Click to expand...

All attribute values should be quoted.
[...]
That cell will be empty when loaded. In the onLoad handler you now call
script code that will fill the cell with your graph.
I.e. you could do with another function within your script:
function placeGraph(id)
{ var cell = document.getElementById(id)
cell.innerHTML = createBarGraph()
}

and with
<body onLoad="placeGraph('graphcell')">
it should work.
Click to expand...

However, without further feature tests this is just a big overhead.
Of course, you can combine these things and use
<body
onLoad="document.getElementById(graphcell).innerHTML=createBarGraph()">
Click to expand...

Needs to be

onLoad="document.getElementById('graphcell').innerHTML=createBarGraph()">

for a remote chance of working. (However, it would be better if
createBarGraph() and consequently graph.create() returned a reference to a
DOM Node object so that it can be inserted as child node of the element node
referred to by the equivalent of document.getElementById('graphcell'), and
maybe replace existing child nodes. It could not be done by the OP without
learning about DOM mutator methods.)
and do without the extra function if you really want to push your code
on the track of unmaintainability.
Click to expand...

With your code it is on that track already.


PointedEars
 
L

Lasse Reichstein Nielsen

James Kimble said:
I've got a javascript source file with functions (creates a bar graph)
I want to call from inside an html table cell so that the graph
appears in the cell. ....
<head>
<script language="JavaScript" src="bargraph.js"></script>
Click to expand...

Replace language="JavaScript" with type="text/javascript" to get
valid HTML (the type attribute is required, the language attribute
is irrelevant and deprecated).
<script language="JavaScript">
function createBarGraph() {
graph = new BarGraph("HorizBar");
graph.values = "1000";
document.write(graph.create());
}
</script>
</head>
<body onLoad="createBarGraph()">
Click to expand...

As others have said, this does document.write when the page has finished
loaded, and the document has been closed. Which means that it replaces
the curren document instead of appending to it.
So don't call it here.
<table width="100%" border="0">
<tr>
<td>HPX40</td>
<td>CUSTOMER DEFINED TEXT </td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Plate Status:</td>
<td><form name="f1" action="javascript:createBarGraph()"
method="post"></td>
Click to expand...

If you just want to put the bar graph here when the page is loading,
you should just call your function:

<td><script type="text/javascript">
createBarGraph();
</script>

That will call document.write to insert HTML into the page just after
the script element.

/L
 
J

Jeremy J Starcher

On Fri, 06 Jun 2008 09:58:15 -0700, James Kimble wrote:

[Posting order restored. Please don't top-post on USENET]


On Thu, 05 Jun 2008 10:12:32 -0700, James Kimble wrote:
Yeah I'm sure this is a stupid question.
Click to expand...
I've got a javascript source file with functions (creates a bar
graph) I want to call from inside an html table cell so that the
graph appears in the cell. I've tried a bunch of different things
but I'm not getting it. I'm a newbee to both html and javascript
so be kind.
Click to expand...
Any example would be appreciated.
Click to expand...
My current attempt looks like:
Click to expand...

[Code snipped]
This is correct, though unexpected, behavior.
Click to expand...
If you call "document.write" WHILE THE PAGE IS LOADING, then it will
kind of 'slip' stuff into your web page.
Click to expand...
However, you are calling it AFTER the page has loaded, which will
REPLACE the contents of your page with the new information. Many
folks consider document.write problematic at best recommend avoiding
it.
Ok, but what would be the correct way to do this (ie. show the table
with the graph in it)?
Click to expand...

The correct way would be to use the DOM methods to create elements and
insert them into the document, or to create the graph server-side.

<URL:http://www.quirksmode.org/dom/intro.html>

you might also get away with using innerHTML, but I have been getting
away from that.
Click to expand...

Not big on examples are ya.....
Click to expand...


a) Since I can't see ANY of the code that actually draws your graph,
there is no way that I could have provided an example.

b) There was no "short" answer to your question and the long answer was
"Learn about this topic." I provided two terms "DOM methods" and
"innerHTML" with a link that would get you started.
I'm really just trying to throw something together. Getting it done in
the purest form of correctness is not required or even particularly
desirable because this is to be a rough demo. Not a finished product.
Click to expand...

It is possibly that using innerHTML would do what you would like, but
again, without seeing the chart-rendering code I don't know.
So I guess I'll go to the book store and do a little reading. I do
appreciate your guidance but I was really just looking for a simple "do
this" type response to the snippet of code I posted.
Click to expand...

As much as I dislike it (and the problems it has) did you even look up
the "innerHTML" that I mentioned?
Thank you anyway.....
Click to expand...

De Nada
 
J

James Kimble

There are no stupid questions. There are only stupid answers.










Some suggestions:
<head>
<script type="text/JavaScript" src="bargraph.js"></script>
function createBarGraph() {
graph = new BarGraph("HorizBar");
graph.values = "1000";
return graph.create()
}
</script>
</head>

Chech the <script> tag for its attributes
document.write removed. Its intention is to replace the current page. That
is not what you want. The function now returns the (html) string produced by
graph.create(). At least I guess that's what graph.create() will return.
But you need more: you want to place this text inside a table cell.
Conceptually, the html - as a string - would read like this:
'<td>'+createBarGraph()+'</td>'. You can make this happen if you can
identify the table cell. So, give it an ID, like
<table>
<tr>
<td> Plate Status:</td>
<td id=graphcell> </td>
<td>40.5KW</td>
</tr>
</table>
That cell will be empty when loaded. In the onLoad handler you now call
script code that will fill the cell with your graph.
I.e. you could do with another function within your script:
function placeGraph(id)
{ var cell = document.getElementById(id)
cell.innerHTML = createBarGraph()

}

and with
<body onLoad="placeGraph('graphcell')">
it should work.

Of course, you can combine these things and use
<body
onLoad="document.getElementById(graphcell).innerHTML=createBarGraph()">
and do without the extra function if you really want to push your code on
the track of unmaintainability.
Tom
Click to expand...


Thanks Tom (D). I appreciate your help! Unfortunately there are too
many self appointed "PointyEars" on Usenet that just can't seem to
realize that being an ass is easy. Being helpful, not so much.

Of course anyone that would post their name with "PointedEars" in
quotes, by definition, has got to be a bit of and idiot so I shouldn't
be surprised. "PointedEars", take a pill....

Thanks again,
 
J

James Kimble

there is no way that I could have provided an example.
Click to expand...

I understand that
b) There was no "short" answer to your question and the long answer was
"Learn about this topic." I provided two terms "DOM methods" and
"innerHTML" with a link that would get you started.
Click to expand...

Right, but I wasn't looking for the long answer. I was looking for a
simple example. A
simple example was possible because one is posted above.
It is possibly that using innerHTML would do what you would like, but
again, without seeing the chart-rendering code I don't know.
Click to expand...

An easier way was listed above.
As much as I dislike it (and the problems it has) did you even look up
the "innerHTML" that I mentioned?
Click to expand...

No but I appreciate the suggestion and I will take a look at that
method.
De Nad
Click to expand...

Not sure why this got so undy bunching. It was a simple question with
a simple
answer. I do appreciate the help though.
 

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

Similar Threads

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
Javascript DOM 1
Sort by number of characters 1
How to have two html audio players on one page? 0
Filter table rows based on multiple checkboxes value 2
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Having trouble centering contents of td ? 3

Members online

Total: 38 (members: 1, guests: 37)
Robots: 322

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,008
Latest member
HaroldDark

Latest Threads

Top