Question

我试图通过制作一些通用函数来动态创建行，所以我不必一次又一次地编写代码

Html代码：

<a href=# onclick="AddRows('Add')"></a>
<table id="xyz">
    <th>
        <td>ID</td>
    </th>
    <th>
        <td>
            Name
        </td>
    </th>
</table>

的Javascript

在Java脚本代码下单击按钮时，将数据输入到表中这是原始项目的演示，因此并非所有原始代码都复制粘贴在此处。第一列添加完美但添加第二列时它会给出

错误：未捕获IndexSizeError：无法在'HTMLTableRowElement'上执行'insertCell'：提供的值（1）超出范围[-1,0]。

 <script>
     var RowID = 0
        var IndexNo = 0
        var EditIndexNo = 0
        function AddRows(AddType) {
            //AddType = Edit/Add
            var i = 0
            var StoreIndexNo
            if (AddType == "Edit") {
                StoreIndexNo = EditIndexNo
            } else {
                StoreIndexNo = IndexNo
            }

            AddRowToTable("xyz", IndexNo, RowID, i, "", i)
            i++
            AddRowToTable("xyz", IndexNo, RowID, i, "", "Name")

            if (AddType != "Edit") {
                RowID++;
            }

        }


    function AddRowToTable(TableName, TableIndexNo, IDOfRow, ColumnNo,ColumnClassName,Data) {
        console.log(TableIndexNo)
        console.log(ColumnNo)
        var ElementTable = document.getElementById(TableName);
        var IndexOfRow = ElementTable.insertRow(TableIndexNo);
        IndexOfRow.id = IDOfRow
        var CellColumn = IndexOfRow.insertCell(ColumnNo)
        if (ColumnClassName != "") {
        CellColumn.className = ColumnClassName
        }
        CellColumn.innerHTML = Data

    }
    </script>

Answer 1

这里的问题是您在一行中添加了2列。但如果你看到你的代码，你就是 -

添加行
在索引0处添加一列
然后将列索引增加到1
然后你再添一行
现在问题出现了。现在它再次添加一行，因为col索引已经存在递增后，它会尝试在索引1处添加列。

那就是错误。没有列0，因此列1如何存在。

所以我建议你在一个函数（AddRowToTable）中完成所有这些操作，并将包含有关列的信息的数组传递给该函数。该功能应 -

添加一行
遍历columns数组并添加任意数量的列。

动态创建行时出错

1 个答案: