JavaScript
 

  How to replace a table by another table in HTML

Asked By Thileep
31-Aug-10 08:50 AM
Earn up to 0 extra points for answering this tough question.
Reply
Hai,
    I want to replace HTML table by using another table when an button click event is fired.

Its urjent.......

  re: How to replace a table by another table in HTML

Anand Malli replied to Thileep
31-Aug-10 08:55 AM
Reply
HI Thileep,

just give your table and id and or wrap this table inside one div and give it id,now on button click find that div and set its innerHTML to your new table's html like following,say if your html is like following

<div id="container">
  <table></table> <!-- your old table -->
</div>

now on button click event call one function and replace its content with new one like following

function changeTable(str)
{
   document.getElementById("container").innerHTML = str;
}

here str is the new value which you will pass to the function while calling

let me know
thxs

  re: How to replace a table by another table in HTML

Thileep replied to Anand Malli
31-Aug-10 08:59 AM
Reply
Ok but, We calling the function how did table new table replace the old one.....

  re: How to replace a table by another table in HTML

Anand Malli replied to Thileep
31-Aug-10 09:04 AM
Reply
Say if your new values are like following (you will have to create new values to replace it from server side with hstring builder or with something)

<table>
   <tr>
     <td>1</td>   
     <td>2</td>   
     <td>3</td>   
     <td>4</td>   
   </tr>
</table>

now you will pass it to javascript function like following (here i am assuming that before calling js function you are having whole string of new values somewhere)

if you have some different senario just let me know
thxs

  re: How to replace a table by another table in HTML
Sagar P replied to Thileep
31-Aug-10 09:07 AM
Reply
What you can do is, place your table inside a DIV and you can Remove it by using code like;

var d = document.getElementById('myDiv');
var oldTbl = document.getElementById('tblID');
d.removeChild(oldTbl);

Once you remove it, add another table like;

var ni = document.getElementById('myDiv');
var newdiv = document.createElement('div');
var divIdName = 'myDiv1';
newdiv.setAttribute('id',divIdName);
ni.appendChild(newdiv);

It will create DIV same like you can create table as well.....

OR

if you have those table created already then you can just use visibility of tables, means hide first table and show other table....
  re: How to replace a table by another table in HTML
Super Man replied to Thileep
31-Aug-10 10:04 AM
Reply

    document.getElementById("d1").innerHTML = "<table><tr><td>hello</td></tr></table>";

 

 

as anand said. Assign html string for table.

  re: How to replace a table by another table in HTML
Goniey N replied to Thileep
31-Aug-10 11:06 AM
Reply
-- Suppose Your Old table Looks Like :

01.<table border="1">
02.  <tr>
03.    <td>T11</td>
04.    <td>T12</td>
05.    <td>T13</td>
06.  </tr>
07.  <tr>
08.    <td>T21</td>
09.    <td>T22</td>
10.    <td>T23</td>
11.  </tr>
12.</table>



-- Your New Table Will Be :

01.<table>
02.  <tr>
03.    <td>T11</td>
04.    <td>T12</td>
05.    <td>T13</td>
06.  </tr>
07.  <tr>
08.    <td>T21</td>
09.    <td>T22</td>
10.    <td>T23</td>
11.  </tr>
12.  <tr>
13.    <td>T31</td>
14.    <td>T32</td>
15.    <td>T33</td>
16.  </tr>
17.</table>




-- Use Below Code :

1.<script type="text/javascript" >
2.    function NewTable()
3.    {
4.      newTable.innerHTML ="<table><tr><td>T11</td><td>T12</td><td>T13</td></tr><tr><td>T21</td><td>T22</td><td>T23</td></tr><tr><td>T31</td><td>T32</td><td>T33</td></t
5. 
6.r></table>"
7.    }
8.    </script>


//Div Tag, Your Old Table....

01.<div id="newTable">
02.  <table border="1">
03.    <tr>
04.      <td>T11</td>
05.      <td>T12</td>
06.      <td>T13</td>
07.    </tr>
08.    <tr>
09.      <td>T21</td>
10.      <td>T22</td>
11.      <td>T23</td>
12.    </tr>
13.  </table>
14.</div>


-- For More Clear View, See Below Images :


-- In Below Image It Will Display Old Table...






-- In Below Image When I Clicked On The Button then It Will Replace Your old Table With New Table.
-- Here I Also Not Set Any Attribute For Table So It Will Not Display Border For More Clear View...




-- You Can Download Source File From Here : Click Here

-- It Will Work 100% For You...

-- Hope this Will Help You....
Create New Account