使用循环更改 SELECT ID答案

【问题标题】：Changing SELECT ID With Loop使用循环更改 SELECT ID
【发布时间】：2015-05-14 13:41:39
【问题描述】：

我目前有一个表单，可以使用 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>

这是我目前正在尝试使用我的 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;
}

但这似乎只招收一名参与者？

【问题讨论】：

标签： javascript html forms function for-loop

【解决方案1】：

您可能遇到了 javascript 错误。可能需要将函数包装在某种 dom-ready 事件中。

这里的小提琴有效，但仅使用 jquery 及其文档就绪检查。

http://jsfiddle.net/brettwgreen/17om5xpm/

我还建议使用 (a) jquery 和 (b) knockout.js。

一旦你开始使用knockout或类似的JS框架来做这种事情，你就再也回不去了。

JS：

$(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;
    }
});

【讨论】：