insertCell Doesn't Work as Expected in Firefox/Chrome

[ms_sws]

I have a table that looks like:

<table id="mytable" border="2" width="640px">
<tr>
  <td></td>
  <td><b>Col 1</b></td>
  <td><b>Col 2</b></td>
  <td><b>Col 3</b></td>
  <td><b>Col 4</b></td>
  <td><b>Col 5</b></td>
  <td><b>Col 6</b></td>
  <td><b>Col 7</b></td>
</table>

and a function to add a row and cells in the row that looks like:

function addRow() {
  //add a row to the table keeping track of last row in table
  noRows = noRows+1;
  var newRow = document.getElementById("mytable").insertRow(noRows);
    
  //add cells to new row with a unique tag and set the innerHTML to contain text boxes
  var oCell = newRow.insertCell(0);
  oCell.innerHTML = "<input type='button' value='x' onclick='removeRow(this);'/>";    

  for (c=1; c<8; c++) {
     tag = "t"+noRows.toString()+c.toString();
     oCell = newRow.insertCell();
     oCell.innerHTML = "<input type='text' id=tag>";
  }
}

The problem is the insertCell won't insert that first cell with an x in it (which will allow users to click on the x button to delete the row) in the first cell in Google Chrome. Firefox inserts a row with the first cell containing the x button but no other cells with the text boxes.

I've tried setting the index on the cell insert to 0, 1, 8, nothing and Chrome either inserts a row with nothing in it (no text boxes, no x button, nothing other than a slight addition of space below the title row) or it adds the row correctly except the x button always winds up in the last cell. IE adds it correctly with no index value or 0. Firefox needs the 0 index (no index creates a blank row with nothing in it. It looks like there's a tiny blank row of nothing being inserted because you see the table get a tiny bit larger vertically but there is no x button, text boxes.

What am I doing wrong? How do I make this work in all 3 browsers? Well actually all browsers ideally but....

Further, if I supply the 0 index to get a row, clicking on the x button to delete it works correctly in IE and Chrome but does nothing in Firefox. That code looks like:

function removeRow(src){
  /* src refers to the input button that was clicked. 
     to get a reference to the containing <tr> element,
     get the parent of the parent (in this case <tr>)
  */   
  var oRow = src.parentElement.parentElement;  
    
  //once the row reference is obtained, delete it passing in its rowIndex   
  document.getElementById("mytable").deleteRow(oRow.rowIndex); 
  noRows = noRows-1; 
}

So what is wrong with both the addRow and removeRow functions that is causing Chrome and Firefox to behave incorrectly?

[fxm]

var oRow = src.parentElement.parentElement; is not supported by Firefox. Use var oRow = src.parentNode.parentNode; instead.

BTW: noRows is undefined, but that is just as well; there is no need for such a variable.

[fxm]

This version of addRow()

noRows=0;
function addRow() {
    //add a row to the table keeping track of last row in table
    noRows = noRows + 1;

    var newRow = document.getElementById("mytable").insertRow(noRows);
    //add cells to new row with a unique tag and set the innerHTML to contain text boxes
    var oCell = newRow.insertCell(-1);
    oCell.innerHTML = "<input type='button' value='x' onclick='removeRow(this);'/>";

    for (c = 1; c < 8; c++) {
        tag = "t" + noRows.toString() + c.toString();
        oCell = newRow.insertCell(-1);
        oCell.innerHTML = "<input type='text' value=" + tag + " id=tag>";

    }
}

should make it clear how insertCell() works.

[ms_sws]

Actually I had an epiphany in the wee hours of the morning after thinking about the behavior I was seeing with Google Chrome inserting rows and cells backwards from what IE does. So I figured the insert row/cell problem out (better late than never I guess) and it works now in all 3 browsers. But the remove row does not work in Firefox. When you click on the delete button (the x), nothing happens. Works fine in Chrome and IE. Ideas?

[fxm]

Did you fix parentElement?

[ms_sws]

Sorry. I missed that change. That will teach me to try to juggle troubleshooting several things at once. That worked! Whew! THANK YOU AGAIN, fxm!

I would be happy to put an acknowledgement link on the site to you (if you have a web site) if you like. If so, e-mail me back with your link.