Question

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

我可以通过单击按钮使用Javascript函数动态地向该表添加行。在此Javascript函数中，“id”和“name”属性已成功创建。

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

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

我在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

我不确定，但你的for循环中是否有一个错误的错误？

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

看起来应该是

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

如果这是正确的，那么表格的最后一行不会被触及for循环，这意味着它没有得到更新。

Answer 2

我认为问题在于你的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>已弃用。）

在你的删除函数for循环中，你有一个你没有使用的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;
}

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

2 个答案: