i have dynamically created table 4 text inputs , 1 drop down selection. when user clicks add button, clone of previous row added table. works should. i'm trying increase unit id input 1. example first row 1111t-01 when add button clicked want next row unit id 1111t-02. thank you.
html code
<h2>please fill in information below</h2> <form action="pmunitcreate.php" method="post"> <p>click add button add new row. click delete button delete rows.</p> <input type="button" id="btnadd" class="button-add" onclick="addrow('mytable')" value="add"/> <input type="button" id="btndelete" class="button-delete" onclick="deleterow('mytable')" value="delete"/> <br> <table id="mytable" class="form"> <tr id="heading"> <th><b><font size="4">job number</font></b></th> <th><b><font size="4">job code</font></b></th> <th><b><font size="4">unit id</font></b></th> <th><b><font size="4">model number</font></b></th> <th><b><font size="4">scope</font></b></th> </tr> <tr id="tablerow"> <td> <input type="text" name="jobnumber[]" required> </td> <td> <input type="text" name="jobcode[]" required> </td> <td> <input type="text" name="unitid[]" required> </td> <td> <input type="text" name="modelnumber[]" required> </td> <td> <select id="scope" name="scope[]" required> <option>100oa</option> <option>btank</option> <option>wsecon</option> <option>netpkg</option> <option>cstmctrl</option> <option>cstmref</option> <option>cstmsm</option> <option>cstmhv</option> <option>cpctrl</option> <option>desihw</option> <option>digscroll</option> <option>dfgas</option> <option>dwall</option> <option>mz-dd</option> <option>dpp</option> <option>encl</option> <option>platehx</option> <option>erw</option> <option>erwmodule</option> <option>ervmod</option> <option>evapbp</option> <option>preevap</option> <option>xp</option> <option>extend</option> <option>fanwall</option> <option>fillstat</option> <option>ffilt</option> <option>pfilt</option> <option>carbfilt</option> <option>custfilt</option> <option>mgh(h)</option> <option>gheat</option> <option>highstatic</option> <option>hgbp</option> <option>hgrh</option> <option>hpconv</option> <option>gfhumid</option> <option>tohumid</option> </select> </td> </tr> </table>
js code
<script> function addrow() { var row = document.getelementbyid("tablerow"); // find row copy var table = document.getelementbyid("mytable"); // find table append var clone = row.clonenode(true); // copy children //clone.id = "newid"; // change id or other attributes/contents table.appendchild(clone); // add new row end of table } function deleterow() { document.getelementbyid("mytable").deleterow(-1); } </script>
if unit id xxxx-1
, x never -
should work.
if x
can -
let me know , i'll update answer accordingly.
function incrementunitid(unitid) { var arr = unitid.split('-'); if (arr.length === 1) {return;} // unit id not valid; var number = parseint(arr[1]) + 1; return arr[0] + '-' + (number < 10 ? 0 : '') + number; } function addrow() { var row = document.getelementbyid("tablerow"); // find row copy var table = document.getelementbyid("mytable"); // find table append var clone = row.clonenode(true); // copy children row.id = "oldrow"; // want take last value inserted clone.cells[2].childnodes[1].value = incrementunitid(clone.cells[2].childnodes[1].value) table.appendchild(clone); // add new row end of table } function deleterow() { document.getelementbyid("mytable").deleterow(-1); }
<h2>please fill in information below</h2> <form action="pmunitcreate.php" method="post"> <p>click add button add new row. click delete button delete rows.</p> <input type="button" id="btnadd" class="button-add" onclick="addrow('mytable')" value="add"/> <input type="button" id="btndelete" class="button-delete" onclick="deleterow('mytable')" value="delete"/> <br> <table id="mytable" class="form"> <tr id="heading"> <th><b><font size="4">job number</font></b></th> <th><b><font size="4">job code</font></b></th> <th><b><font size="4">unit id</font></b></th> <th><b><font size="4">model number</font></b></th> <th><b><font size="4">scope</font></b></th> </tr> <tr id="tablerow"> <td> <input type="text" name="jobnumber[]" required> </td> <td> <input type="text" name="jobcode[]" required> </td> <td> <input type="text" name="unitid[]" required> </td> <td> <input type="text" name="modelnumber[]" required> </td> <td> <select id="scope" name="scope[]" required> <option>100oa</option> <option>btank</option> <option>wsecon</option> <option>netpkg</option> <option>cstmctrl</option> <option>cstmref</option> <option>cstmsm</option> <option>cstmhv</option> <option>cpctrl</option> <option>desihw</option> <option>digscroll</option> <option>dfgas</option> <option>dwall</option> <option>mz-dd</option> <option>dpp</option> <option>encl</option> <option>platehx</option> <option>erw</option> <option>erwmodule</option> <option>ervmod</option> <option>evapbp</option> <option>preevap</option> <option>xp</option> <option>extend</option> <option>fanwall</option> <option>fillstat</option> <option>ffilt</option> <option>pfilt</option> <option>carbfilt</option> <option>custfilt</option> <option>mgh(h)</option> <option>gheat</option> <option>highstatic</option> <option>hgbp</option> <option>hgrh</option> <option>hpconv</option> <option>gfhumid</option> <option>tohumid</option> </select> </td> </tr> </table>
Comments
Post a Comment