PDA

View Full Version : 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>
<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:


<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