Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 17996
  • Last Modified:

How do you delete an HTML table using Javascript?

I need to be able to dynamically delete a row that contains an table, and while I can get this to work on IE it won't work on Firefox. Is there a cross-browser way to accomplish this so that it will work on Firefox and possibly on Opera and Safari?

Here is an example of the code I got to work on IE:

// Javascript Code ---------------------------------

function deleteRow(rowID)
{
    // Remove an embedded table if one exists
    var subTableID = rowID + '_sub';

    var subTable = document.getElementById(subTableID);

    if (subTable)
        subTable.removeNode(true);

    // Remove the actual row
    var r = document.getElementById(rowID);
    r.removeNode(true);
}

// HTML Code ---------------------------------

<table id "main_table">
   <tr id="myrow">
      <table id="myrow_sub">
         <tr>
            <td>Some sample text ... blah</td>
         </tr>
      </table>
   </tr>
</table>

Thanks in advance for any help you can give.

Jason
0
jasonr11
Asked:
jasonr11
  • 5
  • 3
  • 3
  • +1
1 Solution
 
COBOLdinosaurCommented:
For Mozilla you have to follow the standards.  You first iterate through the nod list of the row and use removeChild() for each of the cells, and then you can use the removeChild() method of the table to remove the row.

Cd&
0
 
RoonaanCommented:
Wouldn't you be able to do something like:

if(subTable)
  subTable.parentNode.removeChild(subTable);

Haven't tested it though, and looking at Cd&'s post it possibly wouldn't work either.

-r-
0
 
GwynforWebCommented:
this is cross browser compatible

<table id="myTable">
  <tr id="myrow1">
    <td><table id="myrow_sub1">
      <tr>
        <td>Some sample1 text1 ... blah1</td>
      </tr>
    </table>
    </td>
  </tr>
  <tr id="myrow2">
    <td><table id="myrow_sub2">
      <tr>
        <td>Some sample2 text2 ... blah2</td>
      </tr>
    </table>
    </td>
  </tr>
</table>

<input type="button" value="del row 1" onclick="document.getElementById('myTable').deleteRow(document.getElementById('myrow1').rowIndex)"><p>

<input type="button" value="del row 2" onclick="document.getElementById('myTable').deleteRow(document.getElementById('myrow2').rowIndex)">
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
GwynforWebCommented:
sorry, you want  this

<script>
function delRow(row){
if (document.getElementById(row+'_sub'))
  document.getElementById('myTable').deleteRow(document.getElementById(row).rowIndex)
}
</script>

<table id="myTable">
  <tr id="myrow1">
    <td><table id="myrow1_sub">
      <tr>
        <td>Some sample1 text1 ... blah1</td>
      </tr>
    </table>
    </td>
  </tr>
  <tr id="myrow2">
    <td><table id="myrow2_sub">
      <tr>
        <td>Some sample2 text2 ... blah2</td>
      </tr>
    </table>
    </td>
  </tr>
  <tr id="myrow3">
    <td>Row 3 and no table here </td>
  </tr>
</table>

<input type="button" value="del row 1" onclick=" delRow('myrow1')">
<input type="button" value="del row 2" onclick=" delRow('myrow2')">
<input type="button" value="del row 3" onclick=" delRow('myrow3')">
0
 
COBOLdinosaurCommented:
Yeah, I was looking for the complex, both are cross-browser so they eliminate the non-standard removeNode().

Iwould test on Mac to make sure though.  The deleteRow() method had some bug reports during testing for DOM1 compliance on Mac, so you need to make sure that those are fixed.

Cd&
0
 
jasonr11Author Commented:
I tried the methods suggested by Roonaan and GwynforWeb,  but neither works. I've been attempting to iterate through the child nodes of the enclosing row, but the first step in iterating through the nodes would be to get a handle to the row node like this:

    var r = document.getElementById(rowID);

But untfortunately the row handle 'r' seems to be null. Is there are reason why this handle isn't valid? The row ID is correct, by the way.  I've checked it numerous times.

Thanks,
Jason
0
 
COBOLdinosaurCommented:
checklist:

Is the id spelled correctly (it is case sensitive)

Is the id unique in the page the same id for more than one element is illgal and will result in references failing

Are certain you are getting to the line of code (use an alert right before it)

Use alert(document.getElementById('rowID');  
does it return blank or undefined?

Cd&
0
 
jasonr11Author Commented:
Based on COBOLdinosaur's suggestions I wrote the following 'removeNode' function (below), which is then called by the function deleteRow. It works like a charm on both IE and Firefox, however I still need to try it on Opera and borrow someone's Mac to test it on Safari. Thanks for the help everyone and thanks to COBOLdinosaur for the debugging tips. It turns out that the reason I was unable to get the row handle was that the rowID I was passing to document.getElementById had an endline appended to the end which I was unable to detect just by displaying the value in an alert box. By the way, does anyone have a suggestion on how the view variable values other than by using an alert box? This is just the kind of thing that makes it hard to debug Javascript.

function removeNode(node)
{
    for(var i = (node.childNodes.length - 1); i >= 0; i--)
        removeNode(node.childNodes[i]);

    node.parentNode.removeChild(node);
}

function deleteRow(rowID)
{
    var rowNode = document.getElementById(rowID);
    removeNode(rowNode);
}
0
 
COBOLdinosaurCommented:
How in the world did you get an end of line on the id?  Generation error?

Cd&
0
 
jasonr11Author Commented:
Well, I'm doing the AJAX thing (Asynchronous Javascript And XML) using the XMLHTTPRequest object. Basically, instead of parsing XML, I just send data over the pipe as a string of values seperated by a '|' character and when I do a split on the string data I guess there must have been an endline on the end of the string constructed on the server side. I wrote the server side web service in PHP and the echo function which sends the data back to the XMLHTTPRequest object must automatically append an endline to the string. I guess this is the kind of crap you run into when you write your own protocols and fool around with AJAX. It's cool stuff once you get it working. Once I saw Google Maps, Google Suggest and GMail I was hooked. It's so much faster than having to wait for web pages to refresh with every operation  and especailly if it's a heavy duty web application.

0
 
COBOLdinosaurCommented:
I understand now. I use XMLHTTP for streaming into hidden iframes in my web apps, but I come across with xml data sets amd travers the nodes.  The only time I have to worry about weird dtuff in the text is when I am parsein cdata nodes.  I makes it really slick when the user does a next page and I alrady have it loaded and it displays instantly because all I have to do is populat a data layer from the preformatted data in the iframe.

Cd&
0
 
GwynforWebCommented:
jasonr11 , You have lost me as the code I posted is tested and works, seems like I wasted my time.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 5
  • 3
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now