Solved

Dynamically add row to table

Posted on 2001-08-05
9
289 Views
Last Modified: 2010-05-18
How do I dynamically add a row to an existing table
on a button click event.
without reposting the page.
0
Comment
Question by:kingasa
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 3
9 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6353784
IE and maybe NS 6.

Assuming a table with an id of "myTable"

<script language="JavaScript".
<!--
   var DOM1= (document.getElementById) ? true:false;
   var IE4= (document.all && !document.getElementById) ? true:false;
   var ELpntr=false;


   function addRow(content,morecontent)
   {
      if (DOM1) ELpntr=document.getElementById('mytable');
      if (IE) ELpntr =document.all['mytable'];
      // define the HTML string for the new row
      newstr='<tr><td>'+content+'</td><td>'+morecontent+'</td></tr>';
      // get current HTML
      str=ELpntr.innerHTML;
      // update table definition
      str+=newstr;
   }
//-->
</script>

Put that in the head call it when you want to add a row.

If you want to do it in Netscrap 4.x
You will have to put the table in a layer and re-write the whole layer.
To render the new row the browser will have to re-render and will
probably hang or crash.

Cd&

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6353786
BTW, you have a lot of old open questions which makes me reluctant to spend any more time on this.

Cd&
0
 

Author Comment

by:kingasa
ID: 6353846
which one ?
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 

Author Comment

by:kingasa
ID: 6354016
COBOLdinosaur,

run your example with no luck why?
(IE 5.5)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6354152
Post the code where you are calling it, probably something simple... I hope.

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6354181
Ooops,

I just saw the problem. The last line of the script is missing.

Add one more line to the script:

ELpntr.innerHTML=str;

sorry about that, I forgot to actually rewrite the table.

Cd&
0
 

Author Comment

by:kingasa
ID: 6354787
<html>
<head>
<script language="JavaScript">
  var DOM1= (document.getElementById) ? true:false;
  var IE= (document.all && !document.getElementById) ? true:false;
  var ELpntr=false;
  function addRow(content,morecontent)
  {
     if (DOM1) ELpntr=document.getElementById('mytable');
     if (IE) ELpntr =document.all['mytable'];
     newstr='<tr><td>'+content+'</td><td>'+morecontent+'</td></tr>';
     str=ELpntr.innerHTML;
     str+=newstr;
     ELpntr.innerHTML=str;
  }
</script>

</head>
<body>
<table border='1' id='mytable'>
<tr><td>22</td><td>333</td></tr>
<tr><td>22</td><td>333</td></tr>
</table>

<input type='button' value='AddRow' onClick='addRow("123","456")'>
</body>
</html>
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 50 total points
ID: 6356219
Wonderful!  The problem is IE5.5 insists on using the complex table
if you want to dynamically modify the table.  So we have to add a
tbody tag and use the DOM! methods:


<html>
<head>
<script language="JavaScript">
var DOM1 = (document.getElementById) ? true:false;
var IE= (document.all && !document.getElementById) ? true:false;
var ELpntr=false;
function addRow(content,morecontent)
{
   if (IE)
   {
      ELpntr =document.all['mytable'];
      newstr='<tr><td>'+content+'</td><td>'+morecontent+'</td></tr>';
      str=ELpntr.innerHTML;
      str+=newstr;
      ELpntr.innerHTML=str;
   }
   else
   {
      if (DOM1)
      {
         tabBody=document.getElementsByTagName("TBODY").item(0);
         row=document.createElement("TR");
         cell1 = document.createElement("TD");
         cell2 = document.createElement("TD");
         textnode1=document.createTextNode(content);
         textnode2=document.createTextNode(morecontent);
         cell1.appendChild(textnode1);
         cell2.appendChild(textnode2);
         row.appendChild(cell1);
         row.appendChild(cell2);
         tabBody.appendChild(row);
       }
   }
}
</script>

</head>
<body>
<table border='1' id='mytable'>
<tbody>
<tr><td>22</td><td>333</td></tr>
<tr><td>22</td><td>333</td></tr>
</tbody>
</table>
<input type='button' value='AddRow' onClick='addRow("123","456")'>
</body>
</html>

Works great, but why browser manufactures make things that used to be
simple more difficult, I will never know.

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6359240
Glad I could help. Thanks for the A.:^)

Cd&
0

Featured Post

Enroll in June's Course of the Month

June’s Course of the Month is now available! Experts Exchange’s Premium Members, Team Accounts, and Qualified Experts have access to a complimentary course each month as part of their membership—an extra way to sharpen your skills and increase training.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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…

726 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