Javascript 动态创建行时出错

我试图通过生成一些通用函数来动态创建行，这样我就不必一次又一次地编写代码

Html代码：

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

身份证件
名称

Javascript

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

错误：Uncaught 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>

var RowID=0
var IndexNo=0
var editinexno=0
函数AddRows（AddType）{
//AddType=编辑/添加
变量i=0
var StoreIndexNo
如果（AddType==“编辑”）{
StoreIndexNo=EditIndexNo
}否则{
StoreIndexNo=IndexNo
}
AddRowToTable（“xyz”，索引号，行ID，i，”，i）
我++
AddRowToTable（“xyz”，索引号，行ID，i，”，“名称”）
如果（添加类型！=“编辑”）{
RowID++；
}
}
函数AddRowtTable（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）
如果（ColumnClassName！=“”）{
CellColumn.className=ColumnClassName
}
CellColumn.innerHTML=数据
}

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

添加一行

这将在索引0处添加一列

然后将列索引增加到1

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

这就是它产生错误的地方。没有列0，因此列1如何存在

因此，我建议您在一个函数（AddRowtTable）中完成所有这些操作，并将包含列信息的数组传递给该函数。 该职能应-

添加一行

循环遍历columns数组并添加尽可能多的列

---

如果您标记了jQuery，为什么要使用纯Javascript？在尝试使用Javascript之前您知道HTML吗？你的桌子都弄乱了！这两个链接将帮助您看到哪里出了问题--（1）（2）--继续，图。