Как изменить значение атрибута динамически добавленного элемента с помощью javascript?

Question

Сначала я создал таблицу, используя некоторые данные, загруженные из запроса php mySQL.

Я могу динамически добавить строку в эту таблицу, используя функцию Javascript одним нажатием кнопки. В рамках этой функции Javascript успешно создаются атрибуты «id» и «name».

У меня есть другая функция Javascript, которая может удалить любую строку в таблице, а затем последовательно перечислить значения атрибутов «id» и «name» для элементов в каждой строке.

Проблема в том, что значения атрибута «id» и «name» для любых элементов динамически добавленной строки не обновляются, когда я вызываю функцию deleteRow. Это очевидно, когда я использую функциональность «проверять элемент» в Google Chrome.

У меня такой же результат в Chrome, Firefox и Safari. Почему я не могу динамически обновлять значения атрибутов «id» и «name» для этих элементов, которые были динамически созданы?

Благодарим за помощь.

Вот мой FIXED код:

<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

Я думаю, что проблема с этой линией в вашей цикл:

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>. Хотя вам не нужны центральные теги, когда вы можете использовать CSS text-align на TD для достижения такого же эффекта. (<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++) 

Если это верно, то последняя строка таблицы не получает трогают в течение петли, что означало бы, что он не получает обновления.