如何使用javascript创建具有唯一名称的HTML表

Question

我正在使用javascript动态创建一个html文本框并在表中插入行。

表格中的每一行都有三个单元格（Cell1：文本框，Cell2：添加新行按钮，Cell3：删除当前行按钮）

示例：假设我创建了第一行，并且名称以box1的形式给出，然后我点击了“添加新行按钮”，并在下一行中添加了另一个名为“box2”的文本框。现在我通过“删除当前行按钮”来删除第一行，所以只有一行文本框名称为“box2”，现在我再次单击“添加新行按钮”，它添加了名为“box2”的行，所以现在两个文本框都有相同的名称“box2”

请在这里帮助我，在这种情况下如何获得唯一名称，并且可以避免文本框的重复名称。

这是我的java脚本代码

function addFieldtest () {
    var myTable = document.getElementById("myTable");
    console.log(myTable);
    var currentIndex = myTable.rows.length;
    var currentRow = myTable.insertRow(-1);

    var sr = document.createElement("INPUT");
    sr.setAttribute("style", "width: 100px");
    sr.setAttribute("type", "text");
    sr.setAttribute("name", "box" + currentIndex);
    sr.setAttribute("value", + currentIndex);

    var addRowBox = document.createElement("input");
    addRowBox.setAttribute("type", "button");
    addRowBox.setAttribute("onclick", "deletekeyword(this);");
    addRowBox.setAttribute("class", "objbutton");
    addRowBox.setAttribute("style", "background: url(../pic/delete.png);width: 20px;height:19px;background-repeat: no-repeat;background-position: center;");
    addRowBox.setAttribute("title", "Delete this keyword");


    var delRowBox = document.createElement("input");
    delRowBox.setAttribute("type", "button");
    delRowBox.setAttribute("value", "Insert keyword");
    delRowBox.setAttribute("onclick", "insertkeyword(this);");
    delRowBox.setAttribute("class", "objbutton");



    var currentCell = currentRow.insertCell(-1);
    currentCell.appendChild(sr);

    var currentCell = currentRow.insertCell(-1);
    currentCell.appendChild(addRowBox);

    var currentCell = currentRow.insertCell(-1);
    currentCell.appendChild(delRowBox);
}


function deletekeyword(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("myTable").deleteRow(i);
}

function insertkeyword (r) {
    var myTable = document.getElementById("myTable");
    console.log(myTable);
    var currentIndex = myTable.rows.length;
    var i = r.parentNode.parentNode.rowIndex;
    var currentRow = myTable.insertRow(i);

            var sr = document.createElement("INPUT");
    sr.setAttribute("style", "width: 100px");
    sr.setAttribute("type", "text");
    sr.setAttribute("name", "box" + currentIndex);
    sr.setAttribute("value", + currentIndex);

    var addRowBox = document.createElement("input");
    addRowBox.setAttribute("type", "button");
    addRowBox.setAttribute("onclick", "deletekeyword(this);");
    addRowBox.setAttribute("class", "objbutton");
    addRowBox.setAttribute("style", "background: url(../pic/delete.png);width: 20px;height:19px;background-repeat: no-repeat;background-position: center;");
    addRowBox.setAttribute("title", "Delete this keyword");


    var delRowBox = document.createElement("input");
    delRowBox.setAttribute("type", "button");
    delRowBox.setAttribute("value", "Insert keyword");
    delRowBox.setAttribute("onclick", "insertkeyword(this);");
    delRowBox.setAttribute("class", "objbutton");



    var currentCell = currentRow.insertCell(-1);
    currentCell.appendChild(sr);

    var currentCell = currentRow.insertCell(-1);
    currentCell.appendChild(addRowBox);

    var currentCell = currentRow.insertCell(-1);
    currentCell.appendChild(delRowBox);
}