473,408 Members | 2,888 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,408 software developers and data experts.

Javascript in an HTML table



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.

Jun 27 '08 #1
8 2109
On Thu, 05 Jun 2008 10:12:32 -0700, James Kimble wrote:
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.
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/HowToRe...criptCode.html >

Jun 27 '08 #2

Ok, but what would be the correct way to do this (ie. show the table
with the graph in it)?
On Jun 5, 2:00 pm, Jeremy J Starcher <r3...@yahoo.comwrote:
On Thu, 05 Jun 2008 10:12:32 -0700, James Kimble wrote:
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</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.

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>
Jun 27 '08 #3
James Kimble wrote:
On Jun 6, 6:20 pm, Jeremy J Starcher <r3...@yahoo.comwrote:
>On Fri, 06 Jun 2008 09:58:15 -0700, James Kimble wrote:
>>Ok, but what would be the correct way to do this (ie. show the table
with the graph in it)?
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.

Not big on examples are ya.....
Usenet is not a right.
[...]
This seems like it should be a "really" simple thing to do and yes,
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).
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
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16
Jun 27 '08 #4
"James Kimble" <jk*****@one.netschreef in bericht
news:5d**********************************@25g2000h sx.googlegroups.com...
>

Yeah I'm sure this is a stupid question.
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.
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 <scripttag 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>
<tdPlate 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).innerHT ML=createBarGraph()">
and do without the extra function if you really want to push your code on
the track of unmaintainability.
Tom
Jun 27 '08 #5
Tom de Neef wrote:
"James Kimble" <jk*****@one.netschreef in bericht
>Yeah I'm sure this is a stupid question.
There are no stupid questions. There are only stupid answers.
Such as yours?
>[...]
This just displays my graph by itself. No other table items appear.

Some suggestions:
<head>
<script type="text/JavaScript" src="bargraph.js"></script>
The <script ...tag that was in the original code is missing here.
function createBarGraph() {
graph = new BarGraph("HorizBar");
`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()
The trailing `;' is missing; it is optional here, but recommended.
}
</script>
</head>

Chech the <scripttag for its attributes
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.
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.
But this is the major problem with this question. One can only guess
because the OP is not verbose enough.
[...]
<td id=graphcell</td>
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.
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).innerHT ML=createBarGraph()">
Needs to be

onLoad="document.getElementById('graphcell').inner HTML=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.
With your approach it is on that track already.
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>
Jun 27 '08 #6
[previous posting superseded in the face of new evidence]

Tom de Neef wrote:
"James Kimble" <jk*****@one.netschreef in bericht
>Yeah I'm sure this is a stupid question.
There are no stupid questions. There are only stupid answers.
Such as yours?
[...]
This just displays my graph by itself. No other table items appear.

Some suggestions:
<head>
<script type="text/JavaScript" src="bargraph.js"></script>
The <script ...tag that was in the original code is missing here.
function createBarGraph() {
graph = new BarGraph("HorizBar");
`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()
The trailing `;' is missing; it is optional here, but recommended.
}
</script>
</head>

Chech the <scripttag for its attributes
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.
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>
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.
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).innerHT ML=createBarGraph()">
Needs to be

onLoad="document.getElementById('graphcell').inner HTML=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.
With your code it is on that track already.
PointedEars
--
Prototype.js was written by people who don't know javascript for people who
don't know javascript. People who don't know javascript are not the best
source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>
Jun 27 '08 #7
James Kimble <jk*****@one.netwrites:
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>
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()">
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>
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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jun 27 '08 #8
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.
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.
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.
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.

It is possibly that using innerHTML would do what you would like, but
again, without seeing the chart-rendering code I don't know.
An easier way was listed above.
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.

As much as I dislike it (and the problems it has) did you even look up
the "innerHTML" that I mentioned?
No but I appreciate the suggestion and I will take a look at that
method.
Thank you anyway.....

De Nad
Not sure why this got so undy bunching. It was a simple question with
a simple
answer. I do appreciate the help though.
Jun 27 '08 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: f1crazed | last post by:
Ok, The following html works wonderful in IE. It does not work in FireFox. Can someone please tell me the work around for FireFox to get this to work. HTML DOCUMENT: <html> <head>...
9
by: tshad | last post by:
This is from my previous post, but a different issue. I have the following Javascript routine that opens a popup page, but doesn't seem to work if called from an asp.net button. It seems to work...
4
by: bboyle18 | last post by:
Hi, I am working with a table sorting script which can be found here http://www.workingwith.me.uk/articles/scripting/standardista_table_sorting This script works very nicely, but when there is a...
8
by: Pratik Patel | last post by:
Hello, I used innerHTML to assign HTML content. but in my HTML page content have also some javascript function and it will run when page load. bu when HTML code assgin thru innerHTML then this...
3
by: bhanubalaji | last post by:
hi, I am unable to disable the text(label) in javascript..it's working fine with IE,but i am using MOZILLA.. can any one help regarding this.. What's the wrong with my code? I am...
2
by: sorobor | last post by:
dear sir .. i am using cakephp freamwork ..By the way i m begener in php and javascript .. My probs r bellow I made a javascript calender ..there is a close button ..when i press close button...
1
by: KRISHNA PRAVI | last post by:
the error is "runtime error object expected" here is the code....................................................................................... <script language="javascript"...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
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,...
0
Oralloy
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,...
0
tracyyun
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...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
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 using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.