Javascript 使用循环更改SELECT ID

我目前有一个表单，可以使用javascript在单击时添加新条目。但是，我想更改每个后续“附加组件”的id：例如，第一个tbody的id为“participant1”，但下一个tbody的id为“participant2”，第八个“participant8”，等等

以下是我的主要文件摘录：

<fieldset class="row2">
    <legend>List of Participants</legend>
    <p>
        <input type="button" value="Add Participant" onclick="addRow('dataTable')" />
        <input type="button" value="Clear Participants" onclick="deleteRow('dataTable')" />
        <p>(All acions apply only to entries with check marked check boxes only.)</p>
    </p>
    <table id="dataTable" class="form" border="1">
        <tbody>
            <tr>
                <p>
                    <td>
                        <input type="checkbox" required="required" name="chk[]" checked="checked" />
                    </td>
                    <td>
                        <div>Participant: </div>
                        <select name="participant1" id="participant1">
                            <option>Person A</option>
                            <option>Person B</option>
                            <option>Person C</option>
                        </select>
                    </td>
                </p>
            </tr>
        </tbody>
    </table>
    <div class="clear"></div>
</fieldset>

与会者名单

（所有ACION仅适用于带有复选框的条目。）



参与者：
人A
B人
C人

下面是我目前正在尝试的JS文件：

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if (rowCount < 50) {
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for (var i = 0; i < colCount; i++) {
            var newcell = row.insertCell(i);
            //newcell.id="participant"+ rowCount;
            var cellBody = table.rows[0].cells[i].innerHTML;
            newcell.innerHTML = replaceAll(cellBody, 'participant1', 'participant' + (rowCount + 1));
            console.log(rowCount, newcell.innerHTML)
        }
    }
    else {
        alert("More than 50 Participants? Are you sure?");
    }
}

function replaceAll(str, find, replace) {
    var i = str.indexOf(find);
    if (i > -1) {
        str = str.replace(find, replace);
        i = i + replace.length;
        var st2 = str.substring(i);
        if (st2.indexOf(find) > -1) {
            str = str.substring(0, i) + replaceAll(st2, find, replace);
        }
    }
    return str;
}

函数addRow（tableID）{
var table=document.getElementById（tableID）；
var rowCount=table.rows.length；
如果（行数<50）{
var row=table.insertRow（rowCount）；
var colCount=table.rows[0].cells.length；
对于（变量i=0；i-1）{
str=str.replace（查找，替换）；
i=i+替换长度；
var st2=str.substring（i）；
if（st2.indexOf（find）>-1）{
str=str.substring（0，i）+replaceAll（st2，find，replace）；
}
}
返回str；
}

---

但这似乎只接纳了一名参与者？

您可能会遇到javascript错误。可能需要将函数包装在某种dom就绪事件中

这里的fiddle可以工作，但只使用jquery及其文档就绪检查

我还建议使用（a）jquery和（b）knockout.js

一旦您开始使用knockout或类似的JS框架来实现这类功能，您就再也不会回头了

JS:

$（文档）.ready（函数（）{
window.addRow=函数addRow（tableID）{
var table=document.getElementById（tableID）；
var rowCount=table.rows.length；
如果（行计数<50）{
var row=table.insertRow（rowCount）；
var colCount=table.rows[0].cells.length；
console.log（colCount）；
对于（变量i=0；i-1）{
str=str.replace（查找，替换）；
i=i+替换长度；
var st2=str.substring（i）；
if（st2.indexOf（find）>-1）{
str=str.substring（0，i）+replaceAll（st2，find，replace）；
}       
}
返回str；
}
});

$(document).ready(function() {
    window.addRow = function addRow(tableID) {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        if(rowCount < 50){                          
            var row = table.insertRow(rowCount);
            var colCount = table.rows[0].cells.length;
            console.log(colCount);
            for(var i=0; i<colCount; i++) {
                var newcell = row.insertCell(i);
                //newcell.id="participant"+ rowCount;
                var cellBody = table.rows[0].cells[i].innerHTML;

                newcell.innerHTML = replaceAll( cellBody, 'participant1' , 'participant' + (rowCount+1) );
                console.log(rowCount, newcell.innerHTML)
            }
        }
        else {
           alert("More than 50 Participants? Are you sure?");
        }
    }


    window.replaceAll = function replaceAll(str, find, replace) {
        var i = str.indexOf(find);
        if (i > -1) {
            str = str.replace(find, replace); 
            i = i + replace.length;
            var st2 = str.substring(i);
            if(st2.indexOf(find) > -1) {
              str = str.substring(0,i) + replaceAll(st2, find, replace);
            }       
        }
        return str;
    }
});