如何用javascript改变动态添加元素的属性值？

Question

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

我可以动态地添加一行到这个表中，使用一个JavaScript函数来点击一个按钮。在这个Javascript函数中，“id”和“name”属性被成功创建。

我有另一个Javascript函数，可以删除表中的任何行，然后顺序重新编号为每行内的元素的“ID”和“名称”属性值。

问题是，当我调用deleteRow函数时，动态添加行中任何元素的“id”和“name”属性值都不会更新。当我在Google Chrome中使用“检查元素”功能时，这很明显。

我在Chrome，Firefox和Safari中获得了相同的结果。为什么我无法动态更新动态创建的这些元素的“id”和“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')"   /> 

Answer 1

我认为这个问题是这条线在你的for循环：

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

，其他三个行喜欢它。 childNodes[1]的第一个参考应该是childNodes[0]。

即使我错了，你可以通过把警报那里看看，如果你甚至获得正确元素的引用对其进行调试：

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

而且你的PHP生成的HTML有错误：关闭</center>标签超出了收盘</td>。尽管您可以在TD上使用CSS text-align来达到相同的效果，但您不需要中心标签。 （<center>已弃用。）

在您的delete循环函数中，您有一个没有使用的rowNum变量，并且整个函数可以按如下方式组合起来 - 注意您不需要重复`document.getElementById（tableID）当您在函数的开始处已经存储对表的引用时：

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; 
} 

Answer 2

我不知道，但你有一个差一错误在你的循环？

for (i=1;i<=iRowCount-1;i++) 

看起来应该是

for (i=1;i<=iRowCount;i++) 

如果这是正确的，那么该表的最后一行是没有得到在for循环感动，这将意味着它不会得到更新。