• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 17545
  • Last Modified:

opposite of getElementById

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
freezegravity
Asked:
freezegravity
  • 9
  • 4
  • 3
  • +1
4 Solutions
 
b0lsc0ttIT ManagerCommented:
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
 
freezegravityAuthor Commented:
b0lsc0tt

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

Thanks.

0
 
b0lsc0ttIT ManagerCommented:
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
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
b0lsc0ttIT ManagerCommented:
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
 
freezegravityAuthor Commented:
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
 
b0lsc0ttIT ManagerCommented:
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
 
b0lsc0ttIT ManagerCommented:
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
 
aescntCommented:
Don't you mean
  <input type="submit" name="Submit" value="change table" onclick="document.getElementById('my_table').id = 'my_other_table'" />
?
0
 
enachemcCommented:
you could use innerHTML to set the content of the parent of the table to the HTML representing the desired table.
0
 
b0lsc0ttIT ManagerCommented:
@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
 
aescntCommented:
Ah yes, my bad, the question and the comments were very confusing.
0
 
b0lsc0ttIT ManagerCommented:
@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
 
freezegravityAuthor Commented:
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
 
enachemcCommented:
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
 
b0lsc0ttIT ManagerCommented:
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
 
enachemcCommented:
it works for me. Table 2 is replace by a copy of table 1. What is the problem ?
0
 
aescntCommented:
(btw, you might also want to change the ID of the cloned table :)
0
 
freezegravityAuthor Commented:
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
 
b0lsc0ttIT ManagerCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

  • 9
  • 4
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now