Question

我目前有一个表单可以使用javascript在点击时添加新条目。但是，我想更改后续每个＆＃34;附加组件的ID：例如：第一个tbody的ID为＆＃34;参与者1＆＃34;，但下一个t的ID为＆＃34;参与者2＆＃34;，第八个＆＃34;参与者8＆＃34;，依此类推。 / p>

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

<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;
}

但这似乎只涉及一位参与者？

Answer 1

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

这里的小提琴有效，但只使用jquery及其文档准备检查。

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

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

一旦你开始使用淘汰赛或类似的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;
    }
});

使用循环更改SELECT ID

1 个答案: