Dynamically Adding a Row to an Existing Table

Discussion in 'Web Design and Development' started by Littleodie914, Feb 27, 2008.

  1. Littleodie914 macrumors 68000

    Littleodie914

    Joined:
    Jun 9, 2004
    Location:
    Rochester, NY
    #1
    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:

    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? :confused:
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.
     
  3. Coolnat2004 macrumors 6502

    Coolnat2004

    Joined:
    Jan 12, 2005
    #3
    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.

    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); // new line
    	  table.appendChild(tbody); // modified line
    	  table.setAttribute("border", "2");
    	  alert('Should be done.');
          }
     
  4. deputy_doofy macrumors 65816

    deputy_doofy

    Joined:
    Sep 11, 2002
    #4
    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.
     
  5. Littleodie914 thread starter macrumors 68000

    Littleodie914

    Joined:
    Jun 9, 2004
    Location:
    Rochester, NY
    #5
    Thanks for the replies, but I'm still having the same issue with the following code:

    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. :confused:

    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. :)
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    What browsers are you trying this in, and are you running it on a server or just as a local file?
     
  7. Littleodie914 thread starter macrumors 68000

    Littleodie914

    Joined:
    Jun 9, 2004
    Location:
    Rochester, NY
    #7
    Safari, on a server. (See my edit above.)
     
  8. Coolnat2004 macrumors 6502

    Coolnat2004

    Joined:
    Jan 12, 2005
    #8
    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:
    Code:
    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..
     
  9. Littleodie914 thread starter macrumors 68000

    Littleodie914

    Joined:
    Jun 9, 2004
    Location:
    Rochester, NY
    #9
    Thanks, I'm sure that'll come in handy. :)
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    This should insert it as the first row.
    Code:
    tbody.insertBefore( newRow, tbody.firstChild );
     

Share This Page