Question

当我提醒document.formname.elements.length mozilla的结果时，我不会考虑使用以下函数动态添加到表中的元素。

var rowCounter = 1;

  for (i=0; i<oldIndex.length; i++)
    {
      newRow = tableToSort.insertRow((oldIndex.length+rowCounter));
      for (c=0; c<tableToSort.rows[i+1].cells.length; c++)
        {
          newCell = newRow.insertCell(c);
          newCell.innerHTML = tableToSort.rows[oldIndex[i]].cells[c].innerHTML;
          newCell.className="tblfirstcol";

        }
        rowCounter++;
      }

这是什么问题？

Answer 1

几乎所有浏览器都忽略了innerHTML粘贴到文档的元素，无论是方式还是其他（丢失的ID等）。

您首先必须为文档创建元素，然后通过newCell方法将它们附加到appendChild()。
如果oldIndex[i]中的单元格应该从页面中删除，您还可以使用swapNodes() - 方法。

如果oldIndex[i]中单元格中的HTML可以作为整个元素复制，我将测试。所以，我会回来的......

好吧，在这个答案中忘掉以上所有内容。这应该有效，将这两行放在您将innerHTML放入newCell的行中。

var cellContent = tableToSort.rows[oldIndex[i]].cells[c].cloneNode(true);
newCell=newRow.appendChild(cellContent);

OOPS！代码添加了整个单元格。纠正。现在也省略了原来的newCell定义。

Answer 2

请注意，form.elements仅引用表单提交算法中发生的表单中的元素。因此，如果向表单添加另一个P元素，则不会增加form.elements.length。如果你添加一个INPUT元素，它会。

使用以下内容，我会在警报中获得1，然后是2，然后是3，这是预期的。最后一步是使用innerHTML插入INPUT元素。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            window.addEventListener("DOMContentLoaded", function() {
                var form = document.forms.test;
                alert(form.elements.length);
                var table = form.getElementsByTagName("table")[0];
                var row = table.insertRow(-1);
                var cell = row.insertCell(-1);
                cell.appendChild(document.createElement("input"));
                alert(form.elements.length);
                var another_row = table.insertRow(-1);
                var another_cell = another_row.insertCell(-1);
                another_cell.innerHTML = "<input>";
                alert(form.elements.length);
            }, false);
        </script>
    </head>
    <body>
        <form name="test">
            <table>
                <tbody>
                    <tr>
                        <td><input></td>
                    </tr>
                </tbody>
            </table>
        </form>
    </body>
</html>

mozilla中的javascript innerHTML

2 个答案: