javascript - Changing ID Dynamically in Select list using Loop -
i have form can add new entries on click using javascript. however, change id of each subsequent "add-on": e.g. first tbody has id of "participant1", next 1 have id of "participant2", eighth "participant8", , forth.
here main file:
<body> <form action="process" class="register" method="post"> <h1>add participants</h1> <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 entries 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> <input class="submit" type="submit" value="confirm »" /> <div class="clear"></div> </form> </body> and here js function:
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.innerhtml = table.rows[0].cells[i].innerhtml; } }else{ alert("more 50 participants? sure?"); } }
html code
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <title>test</title> </head> <body> <form action="process" class="register" method="post"> <h1>add participants</h1> <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 entries 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> <input class="submit" type="submit" value="confirm »" /> <div class="clear"></div> </form> <script> var j=1; 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"+ j; newcell.innerhtml = table.rows[0].cells[i].innerhtml; j++; } }else{ alert("more 50 participants? sure?"); } } </script> </body> </html>
Comments
Post a Comment