使用循环更改SELECT ID

Question

I currently have a form that can add new entries on click using javascript. However, I would like to change the id of each subsequent "add-on": eg The first tbody has an id of "participant1", but the next one will have an id of "participant2", the eighth "participant8", and so forth.

Here is the excerpt from my main file:

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

And here is what I am currently attempting with my JS file:

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

But this appears to only be taking in one participant?

Answer 1

You are probably getting javascript errors. May need to wrap the functions in some kind of dom-ready event.

The fiddle here works, but only using jquery and its document ready check.

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

I'd also recommend using (a) jquery and (b) knockout.js.

Once you start using knockout or similar JS framework for this kind of thing, you'll never go back.

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