如何使用javascript更改动态添加元素的属性值

我最初使用从php-mySQL查询加载的一些数据创建一个表。

我可以在单击按钮时使用Javascript函数向该表动态添加一行。在这个Javascript函数中，成功地创建了"id"answers"name"属性。

我有另一个Javascript函数，它可以删除表中的任何一行，然后依次为每行中的元素重新编号"id"answers"name"属性值。

问题是，当我调用deleteRow函数时，动态添加行中任何元素的"id"answers"name"属性值都不会得到更新。当我在谷歌浏览器中使用"检查元素"功能时，这一点就很明显了。

我在Chrome、Firefox和Safari中都有同样的结果。为什么我不能动态更新这些动态创建的元素的"id"answers"name"属性值？

谢谢你的帮助。

这是我的固定代码：

<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')"         />