change elements

**d-machine** · 08-23-2009, 10:42 PM

Hi I have a table,
and I want to replace it with another table when I click on button, how can I do it?

I prefer a solution that is not based on css, since I want to remove the last table from the page.

I think there is need here for ajax, but I'm not sure.

**kaos** · 08-24-2009, 04:36 PM

Sorry, I'm not good at CSS. But I can do it with JavaScript:

HTML Code:

<html>
<head>
<title>My Table Page</title>
<script>
function showhide(id){ 
if (document.getElementById){ 
obj = document.getElementById(id); 
if (obj.style.display == "none"){ 
obj.style.display = ""; 
} else { 
obj.style.display = "none"; 
} 
} 
} 
</script>
</head>
<body>

<div id="div1">
<table id="table1">
TABLE CONTENT
</table>
</div>

<div id="div2">
<table id="table2">
TABLE CONTENT
</table>
</div>

<br><br>
<input type="submit" value="Switch Tables!" onClick="showhide('div2'); return(false);">
</body>
</html>

Is this what you mean?

**d-machine** · 08-25-2009, 08:51 AM

Hi thank you,
but actually it's not what I'm looking for. I need something more complicated:

I have a table with xxx id, and I want to replace it with another table with the same id.
Actually I just want to change its td's (the new table can have less or more td's).
All the table have only 1 tr.

**thenajsays** · 08-25-2009, 02:42 PM

im not sure if this would work on a table (i know it will work on a div, but lets give this a shot), but try assigning the HTML to some javascript variables and then use the innerHTML method like so:

Code:

<html>
<head>
<script>
var oldContent = "<tr><td>Old Stuff</td></tr>"
var newContent = "<tr><td>New Stuff</td><td>More Stuff</td></tr>"
function tableChange(id, old, new){
     if (document.getElementById(id).innerHTML == old){
     document.getElementById(id).innerHTML = new;
     }
     else{
     document.getElementById(id).innerHTML = old;
     }
}
</script>
</head>
<body>
<table id="myTable">
<tr><td>Old Stuff</td></tr>
</table>
<input type="button" value="Change Table" onClick="tableChange('myTable', oldContent, newContent)">

let me know how it goes... cheers

Thread: change elements

Thread Tools

Search Thread

change elements

The Following User Says Thank You to kaos For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions