This week's book giveaway is in the OCPJP forum.
We're giving away four copies of OCA/OCP Java SE 7 Programmer I & II Study Guide and have Kathy Sierra & Bert Bates on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes Table in Javascript & HTML Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of OCA/OCP Java SE 7 Programmer I & II Study Guide this week in the OCPJP forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Table in Javascript & HTML" Watch "Table in Javascript & HTML" New topic
Author

Table in Javascript & HTML

Angela Jessi
Ranch Hand

Joined: Nov 27, 2000
Posts: 428
Hi All,
I want to know that is it possible to update the values of any cell of the table in Javascript or HTML?

Please let me,
Thanks a lot in advance!
Angela
bill bozeman
Ranch Hand

Joined: Jun 30, 2000
Posts: 1070
Cells in HTML are not like cells in excel or a spreadsheet. They are mainly used for layout. So, it is not really a cell that you are updating but a layer. This is pretty different in Netscape and IE, so you will have to do some good reasearch in IE and Netscape.
What are you trying to udpate and maybe I can give you more assistance. This is not an easy task though, so you know.
Bill
Angela Jessi
Ranch Hand

Joined: Nov 27, 2000
Posts: 428
Hi Nill,
I really appreciate your help. I really need help this time. Okay let me explain you briefly.
I want to create web page.In which I want (for example) create 5 rows and 3 columns and one push button with pure HTML code.Now with the Javascript and may be with DOM, when I click push button, I want to change the value of any particular cell(for example:1st cell of 3rd row).
Now I know how to make table of 5 rows and 3 columns in HTML. But I really don't how with the use of DOM I can change the value of particular cell.If you would explain by very simple example. I will really appreciate your response.
Thanks again a lot,
Angela
Angela Jessi
Ranch Hand

Joined: Nov 27, 2000
Posts: 428
Hi Bill,
I really appreciate your help. I really need help this time. Okay let me explain you briefly.
I want to create web page.In which I want (for example) create 5 rows and 3 columns and one push button with pure HTML code.Now with the Javascript and may be with DOM, when I click push button, I want to change the value of any particular cell(for example:1st cell of 3rd row).
Now I know how to make table of 5 rows and 3 columns in HTML. But I really don't how with the use of DOM I can change the value of particular cell.If you would explain by very simple example. I will really appreciate your response.
Thanks again a lot,
Angela
Angela Jessi
Ranch Hand

Joined: Nov 27, 2000
Posts: 428
Hi Bill
I am sorry for mispelling ur name...
Thanks
angela
Originally posted by Angela Jessi:
Hi Nill,
I really appreciate your help. I really need help this time. Okay let me explain you briefly.
I want to create web page.In which I want (for example) create 5 rows and 3 columns and one push button with pure HTML code.Now with the Javascript and may be with DOM, when I click push button, I want to change the value of any particular cell(for example:1st cell of 3rd row).
Now I know how to make table of 5 rows and 3 columns in HTML. But I really don't how with the use of DOM I can change the value of particular cell.If you would explain by very simple example. I will really appreciate your response.
Thanks again a lot,
Angela

Roseanne Zhang
Ranch Hand

Joined: Nov 14, 2000
Posts: 1953
Look at here: http://www.w3schools.com/xml/tryit.asp?filename=cd_application
You need to be creative to use this example, but I think it would work!
Roseanne
bill bozeman
Ranch Hand

Joined: Jun 30, 2000
Posts: 1070
The DOM will work with IE but not Netscape. With IE, every tag is part of the DOM and can be accessed, but with Netscape that is not true. They only have certain tags that you can access in javascript. For that reason, you would want to have all of your cells start with a div tag so you can change the contects of the div tag. So it could look like this:

Then you have some javascript that changes the value of what is in that div tag. That is what I would think would be the easiest solution. However, trying to change the value of the div tag is the main work. I am not a DHTML expert, so take a look at some sites like www.dhtml.com and look for some examples.
Good luck,
Bill
Angela Jessi
Ranch Hand

Joined: Nov 27, 2000
Posts: 428
Hi Bill,
Thanks again for ur help.I have restriction to use only HTML,Javascripot and DOM. Do u have any simple example through which, with the help of DOM API I can change the value of any cell in HTML(not xmL or DHTML)
Please help me out!It is really very urgent for me.
Thanks again,
Angela
Originally posted by bill bozeman:
[B]The DOM will work with IE but not Netscape. With IE, every tag is part of the DOM and can be accessed, but with Netscape that is not true. They only have certain tags that you can access in javascript. For that reason, you would want to have all of your cells start with a div tag so you can change the contects of the div tag. So it could look like this:

Then you have some javascript that changes the value of what is in that div tag. That is what I would think would be the easiest solution. However, trying to change the value of the div tag is the main work. I am not a DHTML expert, so take a look at some sites like www.dhtml.com and look for some examples.
Good luck,
Bill[/B]

bill bozeman
Ranch Hand

Joined: Jun 30, 2000
Posts: 1070
Roseanne, that is a good link and Angela that is kind of like what I was saying. However, when I run the link in Netscape it didn't work, so again you will have to play with it to get it to work in both browswers. innerHTML is the function I couldn't remember. Test that in Netscape and see what you get.
Bill
bill bozeman
Ranch Hand

Joined: Jun 30, 2000
Posts: 1070
Well if you are using HTML, Javascript and DOM, then you are using DHTML. That is basically what DHTML is, playing with all of the objects in the document using javascript. So when I said the DOM isn't really used in Netscape, what I meant was that the DOM is different in Netscape than it is in IE.
Follow Roseanne's link and use code similar to that becuause that is using HTML, Javascript, and DOM. They may be using some XML to get the list loaded the first time, but all the code shown at the right is javascript and DOM related.
Bill
Angela Jessi
Ranch Hand

Joined: Nov 27, 2000
Posts: 428
Hi Roseanne and Bill,
Thanks again. Is DIV,innerHTML tage of HTML? If yes, would please give example how I can chage the value of cell with Javascript?(Please)
Thanks again,
Angela
Originally posted by bill bozeman:
Roseanne, that is a good link and Angela that is kind of like what I was saying. However, when I run the link in Netscape it didn't work, so again you will have to play with it to get it to work in both browswers. innerHTML is the function I couldn't remember. Test that in Netscape and see what you get.
Bill

bill bozeman
Ranch Hand

Joined: Jun 30, 2000
Posts: 1070
The div tag is html supported by all browsers. innerHTML is used in javascript to access the text in the tag.
So if you had a div tag like this:
<div name="r1c1">Some value</div>
you could have a javascript function that says something like:
document.r1c1.innerHTML="Some other value";
Just activate the function with a button.
However, I didn't test this and I can't remember how it works on both browsers. Start with that and then see what you get.
Bill
Angela Jessi
Ranch Hand

Joined: Nov 27, 2000
Posts: 428
Hi Bill,
I used following code:
<html>
<head>
<title>Testing to update values</title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
function updateValues(){
document.r1c1.innerHTML="Value Changed";}
</SCRIPT>
<table border ="1">
<tr>
<td><div name="R1C1">Some value</div></td>
<td><div name="R1C2">Some value</div></td>
<td><div name="R1C3">Some value</div></td>
</tr>
<tr>
<td><div name="R2C1">Some value</div></td>
<td><div name="R2C2">Some value</div></td>
<td><div name="R2C3">Some value</div></td>
</tr>
</table>
<INPUT TYPE=BUTTON VALUE="Click me" NAME="BtnHello" OnClick="updateValues()">
</body>
</html>
When I run it, and click the button, it gives following error:
document.r1c1 is not an object
Please let me know what should I do?
Thanks in advance,
Angela
Angela Jessi
Ranch Hand

Joined: Nov 27, 2000
Posts: 428
Hi Bill,
Finally I got it. Here is code:
<html>
<head>
<title>Testing to update values</title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
function updateValues(){
printer_value.innerHTML ="Value Changed to XYZ";}
</SCRIPT>
<table border ="1">
<tr>
<td id = "printer_value"><div name="7020">7020</div></td>
<td id = "model_vlaue"><div name="7040">7040</div></td>
<td id = "price_value"><div name="7060">7050</div></td>
</tr>
<tr>
<td><div name="R2C1">IP_421J</div></td>
<td><div name="R2C2">IP-421</div></td>
<td><div name="R2C3">IP-601</div></td>
</tr>
</table>
<INPUT TYPE=BUTTON VALUE="Click me" NAME="BtnHello" OnClick="updateValues()">
</body>
</html>
Thanks a lot!
Angela
Angela Jessi
Ranch Hand

Joined: Nov 27, 2000
Posts: 428
Hi Roseanne,
Thanks a lot for your help!
Thanks
Angela
bill bozeman
Ranch Hand

Joined: Jun 30, 2000
Posts: 1070
You had a casing issue. r1c1 needed to be R1C1 since that is the name you gave the div tag and not the lowercase version. However I was wrong when I said use name, you need to use id instead as Roseanne had. Also, this still isn't working in Netscape if that is important to you.
Bill
Angela Jessi
Ranch Hand

Joined: Nov 27, 2000
Posts: 428
Hi Bill,
Did you try to run my code in Netscape. I want to confirm b'cos if it is not working then I have change!
Please let me know
Thanks,
Angela
bill bozeman
Ranch Hand

Joined: Jun 30, 2000
Posts: 1070
Nope, it is not working in Netscape. Netscape can be a pain sometimes to get these things to work.
Bill
Angela Jessi
Ranch Hand

Joined: Nov 27, 2000
Posts: 428
Hi Bill,
Thanks again,
So what other solution you have that we can use in Netscape too.
Also,If I want to add other functionality.Like upto this we were discussing how to update the value of cell within one file.
Now there are two HTML pages a.html and b.html.
In a.html we have table with row and columns.Now if i want to take string value from b.html and update that value of(b.html) into any cell of a.html.
Is is possible?
Thanks
Angela
babu balakrishnan
Greenhorn

Joined: Jan 02, 2003
Posts: 1
hi,
DIV tag is supported well only with IE.If u r using NS4 then u should go 4 layer tag
cheers
Babs
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
well the proper way to do it is....
wlayer is the name of the cell
TheText = The Text ....lol
if (document.getElementById) {document.getElementById(wlayer).innerHTML=TheText;}
else if (document.all) {document.all[wlayer].innerHTML=TheText;}
else if (document.layers) {document.layers[wlayer].innerHTML=TheText;}
 
 
subject: Table in Javascript & HTML