Question

I initially create a table using some data loaded from a php mySQL query.

I can dynamically add a row to this table using a Javascript function on the click of a button. Within this Javascript function the “id” and “name” attributes are successfully created.

I have another Javascript function that can delete any row in the table and then sequentially re-number the “id” and “name” attribute values for the elements within each row.

The problem is that the “id” and “name” attribute values for any elements within a dynamically added row do not get updated when I call the deleteRow function. This is evident when I use the “inspect element” functionality within Google Chrome.

I have the same result in Chrome, Firefox, and Safari. Why can’t I dynamically update the “id” and “name” attribute values for these elements that were dynamically created?

Thanks for your help.

Here’s my FIXED code:

<script language="javascript">

function addRow(tableID)
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);

var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.className="recipeIngInput";
element1.type = "text";
element1.name = "ing"+rowCount;
element1.id = "ing"+rowCount;
cell1.appendChild(element1);

var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.className="recipeAmtInput";
element2.type = "text";
element2.name = "amt"+rowCount;
element2.id = "amt"+rowCount;
cell2.appendChild(element2);

var cell3 = row.insertCell(2);
var element3 = document.createElement("img");
element3.onclick = function() {deleteRow('ingredients',this) };
element3.src = "img/redx.jpg";
element3.alt = "delete row";
element3.width = "15";
element3.height = "15";
cell3.appendChild(element3);
}

function deleteRow(tableID,t)
{
var conf=confirm("Delete this ingredient?");
if (conf==true)
    {       
    var table = document.getElementById(tableID);
    table.deleteRow(t.parentNode.parentNode.sectionRowIndex);

    //find the new number of rows in the table after deleting the one row.
    var iRowCount = table.getElementsByTagName('tr').length;

    //loop through all the rows left in the table and re-define their ID and NAMES to be in order starting with xxx1.
    for (var i=1; i<iRowCount; i++)
        {
        row = table.rows[i];
        // Update ingredient id and name values
        setIdAndName(row.cells[0].childNodes[0], "ing"+i);
        // Update amount id and name values
        setIdAndName(row.cells[1].childNodes[0], "amt"+i);
        }
    }
}

function setIdAndName(elmnt,val) {
   elmnt.id = val;
   elmnt.name = val;
   }

</script>
echo '
<table style="margin-left:0" id="ingredients" width="350px" cellspacing="0" border="1">
    <tr>
        <th style="width:200px;">Ingredient Name</th>
        <th style="width:100px;">Amount</th>
        <th style="width:15px;"></th>
    </tr>';


if ($num_results == 0)
{
echo'
    <tr>
        <td><input class="recipeIngInput" type="text" name="ing1" id="ing1"/></td>
        <td><input class="recipeAmtInput" type="text" name="amt1" id="amt1"/></td>
        <td><img onclick="deleteRow("ingredients",this)" src="img/redx.jpg" alt="delete row" width="15" height="15" /></td>
    </tr>';
}
else
{
while($row = mysql_fetch_array($result))
    {
    $ing[$i] = $row['ingredient_id'];
    $amt[$i] = $row['amount'];
    $r = $i + 1;

    echo'
    <tr>
        <td><input class="recipeIngInput" type="text" name="ing'.$r.'" id="ing'.$r.'" value="'.$ing[$i].'"/> </td>
        <td><input class="recipeAmtInput" type="text" name="amt'.$r.'" id="amt'.$r.'" value="'.$amt[$i].'"/> </td>
        <td> <img onclick="deleteRow(\'ingredients\',this)" src="img/redx.jpg" alt="delete row" width="15" height="15" /></td>
    </tr>';
    $i++;
    }
}
echo'</table>';

?>
<input type="button" value="Add Another Ingredient" onclick="addRow('ingredients')"         />

Answer 1

I think the problem is with this line in your for loop:

document.getElementById(tableID).rows[i].cells[0].childNodes[1].childNodes[0].id = "ing"+i;

And the other three lines like it.
The first reference to childNodes[1] should be childNodes[0].

Even if I’m wrong about that you can debug it by putting an alert there to see if you’re even getting a reference to the right element:

alert(document.getElementById(tableID).rows[i].cells[0].childNodes[1].childNodes[0].id);

Also your PHP generated HTML has an error: the closing </center> tags are outside the closing </td>. Though you shouldn’t need center tags when you can use CSS text-align on the TD to achieve the same effect. (<center> is deprecated.)

In your delete function for loop you have a rowNum variable that you’re not using, and the whole function can be neated up somewhat as follows – noting that you don’t need to keep repeating `document.getElementById(tableID) when you’ve already stored a reference to the table at the beginnging of the function:

function deleteRow(tableID,t) {
   if (confirm("Delete this ingredient?")) {
      var table = document.getElementById(tableID);
      var row = t.parentNode.parentNode;
      table.deleteRow(row.sectionRowIndex);

      //find the new number of rows in the table after deleting the one row.
      var iRowCount = table.getElementsByTagName('tr').length;
      alert('Your table has ' + iRowCount + ' rows.');

      //loop through all the rows left in the table and re-define their ID and NAMES to be in order starting with 1xxx.
      for (var i=1; i<iRowCount; i++) {
         row = table.rows[i];
         // Update ingredient id and name values
         setIdAndName(row.cells[0].childNodes[0].childNodes[0], "ing"+i);
         // Update amount id and name values
         setIdAndName(row.cells[1].childNodes[0].childNodes[0], "amt"+i);
      }
   }
}
function setIdAndName(elmnt,val) {
   // uncomment for debugging - alert("DEBUG: Updating element " + elmnt.id);
   elmnt.id = val;
   elmnt.name = val;
}