Solved

opposite of getElementById

Posted on 2006-11-20
19
16,385 Views
Last Modified: 2008-01-09
Hello experts:

Say I have a table like this in my form:

<table id="my_table">
<tr>
   <td>value 1</td>
   <td>value 2</td>
   <td align="center">value 3</td>
</tr>
</table>

once the submit button is pressed, I want to replace "my_table" with

<table id="my_other_table">
<tr>
     <td>value1</td>
</tr>
<tr>
     <td>value2</td>
</tr>
</table>

Essentially, I am thinking of a statement like this:

document.setElementByID("my_other_table") = document.getElementById("my_table");

The above statement doesn't work because there may not be such a thing as a setElementById. Is there any other method I should be aware of?

Thanks



0
Comment
Question by:freezegravity
  • 9
  • 4
  • 3
  • +1
19 Comments
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17983048
freezegravity,

You don't want a different method, you just need to change the id property.  Try this ...

document.getElementById("my_table").id = "my_other_table";

Let me know if you have any questions or need more information.

b0lsc0tt
0
 

Author Comment

by:freezegravity
ID: 17983318
b0lsc0tt

It didn't work. Well, there are no "errors on page" but still, its not updating the table.

Thanks.

0
 
LVL 54

Assisted Solution

by:b0lsc0tt
b0lsc0tt earned 400 total points
ID: 17983347
What are you looking at to see if the table was updated?  What do you mean it isn't getting updated?  If you are just viewing source then that will not change in most cases.  You would need to view the browser generated source.

I use Firefox and its Web Developer extension to see changes like this.  It has an option to Veiw Generated Source.  It is the source as the browser sees it.

If you want to test to see if this changed then try getting the element by the new id.  Use alert to show innerHTML or something like it to see if the id attribute was changed.

Let me know the results or if you have any questions.  I don't know if I have ever tried changing the id so I will test this quickly myself.

bol
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17983367
That will work.  If you still have a problem then please let me see the code or elaborate on what should change in the table.

bol
0
 

Author Comment

by:freezegravity
ID: 17984189
THANKS A BUNCH bol for letting me know about the Firefox Web Dev edition. Good to know!

Below's the table code. Essentially, what I want to happen is that when "change table" is clicked, I want both tables to be like the second table.

<form id="form1" name="form1" method="post" action="">
<table id="my_table" border="1">
<caption>This is table 1</caption>
<tr>
   <td>value 1</td>
   <td>value 2</td>
   <td align="center">value 3</td>
</tr>
</table>  
<table id="my_other_table" border="1">
<caption>This is table 2</caption>
<tr>
     <td>value1</td>
</tr>
<tr>
     <td>value2</td>
</tr>
</table>
  <label>
  <input type="submit" name="Submit" value="change table" onclick="document.getElementById('my_table').id = document.getElementById('my_other_table')" />
  </label>
</form>

0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17984223
Are you trying to set the id of table 1 to an id that already exists?  If you are then you shouldn't.  An id needs to be unique.  Even if you could change the id to another table's id it would not duplicate the contents.

What part of the contents of table 1 do you want to change?  You can read the contents of a tag with innerHTML.  If you used the line below then the contents of the table with id "my_table" would be changed to match the contents of the table with id "my_other_table".  The ids and the table tag itself would not change.

document.getElementById("my_table").innerHTML=document.getElementById("my_other_table").innerHTML;

I don't know for sure if this is the effect you are looking for but I think it is closer.  Let me know.

bol
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17984227
By the way, if you are interested in another very helpful extension for Firefox (used for javascript and DOM) then look at Firebug.

bol
0
 
LVL 6

Expert Comment

by:aescnt
ID: 17984387
Don't you mean
  <input type="submit" name="Submit" value="change table" onclick="document.getElementById('my_table').id = 'my_other_table'" />
?
0
 
LVL 12

Assisted Solution

by:enachemc
enachemc earned 75 total points
ID: 17985951
you could use innerHTML to set the content of the parent of the table to the HTML representing the desired table.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17988528
@Aescnt - That was the first suggestion I made.  Please read the comments carefully and you will see that Freezegravity isn't just trying to change the id.

@Enachemc - Any particular reason you repeated my suggestion (http:Q_22067440.html#17984223)?

I'm not trying to keep either of you from participating but you should do better.  Please don't take it personal.

@FreezeGravity - Take a look at my comment (http:Q_22067440.html#17984223) and let me know.

bol
0
 
LVL 6

Expert Comment

by:aescnt
ID: 17988826
Ah yes, my bad, the question and the comments were very confusing.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17989095
@Aescnt - Feel free to ask follow up questions of the questioner if something isn't clear but you think you can help.  I have certainly had to do that before. :)  I hope I didn't contribute to the confusion but let me know if you have a question.  Thanks for the reply.

bol
0
 

Author Comment

by:freezegravity
ID: 18049274
Sorry for the delay and confusion.

I have raised the point value of this question to compensate (although I know that points don't really mean much).

Anyway, what I am trying to do is not reset the id.

What should happen is this:

1) When the page loads, the user sees two tables that are arranged differently.
2) When the user hits "Change Table", what should happen is that the second table should be updated to look like the first table. So in this case, the resultant html code would look like:

<table id="my_table" border="1">
<caption>This is table 1</caption>
<tr>
   <td>value 1</td>
   <td>value 2</td>
   <td align="center">value 3</td>
</tr>
</table>  

<table id="my_other_table" border="1">
<caption>This is table 2</caption>
<tr>
   <td>value 1</td>
   <td>value 2</td>
   <td align="center">value 3</td>
</tr>
</table>

bol (and others interested in answering) I have this code on my_page.html:

---------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<table id="my_table" border="1">
<caption>This is table 1</caption>
<tr>
   <td>value 1</td>
   <td>value 2</td>
   <td align="center">value 3</td>
</tr>
</table>  
<table id="my_other_table" border="1">
<caption>This is table 2</caption>
<tr>
     <td>value1</td>
</tr>
<tr>
     <td>value2</td>
</tr>
</table>
  <label>
  <input type="submit" name="Submit" value="change table" onclick="document.getElementById('my_table').innerHTML = document.getElementById('my_other_table').innerHTML;" />
  </label>
</form>
</body>
</html>

------------------------------

But, it does NOT give the result that I am expecting still.

THANK YOU VERY MUCH to all who commented.

FG!
0
 
LVL 12

Expert Comment

by:enachemc
ID: 18049296
innerHTML does not work for the table element:
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp

You will have to remove all rows from table 2 and copy first table's rows to the second table by cloning.
0
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 400 total points
ID: 18049439
There can be problems using innerHTML with tables but I don't think it will matter in this case.  I used your code and put each table in a div tag.  The button replace the contents of table2 div with those of table1 div.  Let me know if you have any questions.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_22067440.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<div id="table1">
<table id="my_table" border="1">
<caption>This is table 1</caption>
<tr>
   <td>value 1</td>
   <td>value 2</td>
   <td align="center">value 3</td>
</tr>
</table>  
</div>
<div id="table2">
<table id="my_other_table" border="1">
<caption>This is table 2</caption>
<tr>
     <td>value1</td>
</tr>
<tr>
     <td>value2</td>
</tr>
</table>
</div>
<button name="submit" value="change table" onclick="document.getElementById('table2').innerHTML = document.getElementById('table1').innerHTML;">Change Table</button>

</body>
</html>
0
 
LVL 12

Expert Comment

by:enachemc
ID: 18049540
it works for me. Table 2 is replace by a copy of table 1. What is the problem ?
0
 
LVL 6

Assisted Solution

by:aescnt
aescnt earned 25 total points
ID: 18051381
(btw, you might also want to change the ID of the cloned table :)
0
 

Author Comment

by:freezegravity
ID: 18051444
bol, your last solution worked quite well. This is knit-picking, but the caption for the cloned table should still say "This is table 2"

I realize that I have terribly blundered asking this question and here's a better way of asking it:

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_22078820.html

THANKYOU ALL FOR PARTICIPATING!!!!

I am closing this question and I hope you all will join me in answering the newly posed one.

Thanks again!

FG!
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18051467
Your welcome!  I'm glad that I could be one of those that helped.  Thank you for the grade, the points and the fun question.

bol
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now