Dynamically Adding a Row to an Existing Table

[Littleodie914]

Hey guys, I'm using Ajax on a site I'm developing to eliminate having to travel to a bunch of different pages to perform pretty simple functions. I'm having an issue getting a table to display a new row, with the following code:

if(xmlHttp.readyState==4)
      {
      alert(xmlHttp.responseText);
      overlay();
      var table = document.getElementById('topfive');
      var newRow = document.createElement('tr');
      var newData = document.createElement('td');
      var dataText = document.createTextNode('Worked!');
      newData.appendChild(dataText);
      newRow.appendChild(newData);
      if (newRow == null)
      	alert('NewRow == null');
      if (newData == null)
      	alert('NewData == null');
	  table.appendChild(newRow);
	  table.setAttribute("border", "2");
	  alert('Should be done.');
      }

The code is "working," in that the table border is set and the alert shows up at the end, but the additional row never shows up. Is there something I'm missing?

 

[angelwatt]

Code worked for me in Firefox and Safari. I just put the code into a function and called that function at onload. The only things I didn't include were the lines up until the var table line.

 

[Coolnat2004]

I was playing with this a few weeks ago on a couple projects of mine. I'm not sure if it was because of IE, but I found that I had to add a 'tbody' element. I'm not totally sure why it is necessary, but my code works in all of the major browsers. I'll modify your code to match my method.

if(xmlHttp.readyState==4)
      {
      alert(xmlHttp.responseText);
      overlay();
      var table = document.getElementById('topfive');
      var tbody = document.createElement('TBODY'); // new line
      var newRow = document.createElement('tr');
      var newData = document.createElement('td');
      var dataText = document.createTextNode('Worked!');
      newData.appendChild(dataText);
      newRow.appendChild(newData);
      if (newRow == null)
      	alert('NewRow == null');
      if (newData == null)
      	alert('NewData == null');
          tbody.appendChild(newRow); // new line
	  table.appendChild(tbody); // modified line
	  table.setAttribute("border", "2");
	  alert('Should be done.');
      }

 

[deputy_doofy]

You need tbody. Even though it's never used, it is there in the DOM.

tr.appendChild(td);
tbody.appendChild(tr);
etc.

You get the idea.

 

[Littleodie914]

Thanks for the replies, but I'm still having the same issue with the following code:

if(xmlHttp.readyState==4)
      {
      alert(xmlHttp.responseText);
      overlay();
      var table = document.getElementById('topfive');
      var tbody = document.createElement('TBODY'); // new line
      var newRow = document.createElement('tr');
      var newData = document.createElement('td');
      var dataText = document.createTextNode('Worked!');
      newData.appendChild(dataText);
      newRow.appendChild(newData);
      if (newRow == null)
      	alert('NewRow == null');
      if (newData == null)
      	alert('NewData == null');
      tbody.appendChild(newRow);
	  table.appendChild(tbody);
	  table.setAttribute("border", "2");
	  alert('Should be done.');
      }

Is there any way to tell the page to reload a certain part, or redraw it? The border is set at the end of the method, but I can't see the new row unless I manually refresh the page.

Edit: I lied, it is working, but I didn't realize two things:

1) It's adding it to the end of the table. Is there an easy way to add it to the top of the table instead of the bottom?
2) The font of the added row was smaller than the rest, so it was very well hidden.

 

[angelwatt]

What browsers are you trying this in, and are you running it on a server or just as a local file?

 

[Littleodie914]

What browsers are you trying this in, and are you running it on a server or just as a local file?

Safari, on a server. (See my edit above.)

 

[Coolnat2004]

If you are using CSS to style the cells, you might have to set the style explicitly. This is how I did it to work with all browsers:

TD.setAttribute("class","class1"); TD.setAttribute("className","class1");

For each cell, mind you. I have no idea how to get it to the top of the row, although that does sound much more useful than adding it to the bottom..

 

[Littleodie914]

If you are using CSS to style the cells, you might have to set the style explicitly. This is how I did it to work with all browsers:

TD.setAttribute("class","class1"); TD.setAttribute("className","class1");

For each cell, mind you. I have no idea how to get it to the top of the row, although that does sound much more useful than adding it to the bottom..

Thanks, I'm sure that'll come in handy.

 

[angelwatt]

This should insert it as the first row.

tbody.insertBefore( newRow, tbody.firstChild );