javascript - add unlimited input fields with prototype -
i adding unlimited input field. below code working fine 1 problem adding after first <tr>. not adding field after additional <tr>. if click on add option adding <before> or after first <tr>. ignoring others <tr>.
my html
<table width="100%" cellspacing="0" id="orderchecklist_item_grid_servicecenters" class="data border"> <colgroup><col width="120"> <col> <col width="100"> <col width="70"> </colgroup><thead> <tr class="headings"> <th width="80%">item</th> <td width="10%" class="last"><button style="" onclick="addfield();" class="scalable add" type="button" title="add option" id="add_new_option_button"><span><span><span>add option</span></span></span></button></td> </tr> </thead> <tbody id="orderchecklist_item_list"> <tr class="template" id="orderchecklist_item_template1"> <td><input type="text" value="" name="servicename[]" placeholder="check list item" class="input-text"> </td> <td class="last"><button style="" onclick="removefield(this);" class="scalable deletefield" type="button" title="delete" id="delete_button"><span><span><span>delete</span></span></span></button></td> </tr> </tbody> <tfoot id="extra_field" class="no-display template"> <tr class="template" id="orderchecklist_item_template"> <td><input type="text" name="item[]" placeholder="check list item" class="input-text"></td> <td class="last"> <button style="" onclick="removefield(this);" class="scalable deletefield" type="button" title="delete" id="delete_button"><span><span><span>delete</span></span></span></button></td> </tr> </tfoot> </table> my js code adding , removing field
<script type="text/javascript"> function addfield() { var htm= $('extra_field').innerhtml; $$('#<?php echo $_block->gethtmlid() ?>_list').last('tr').insert({after:htm}); } function removefield(ele) { var row = ele.parentnode.parentnode; row.parentnode.removechild(row); } </script>
just insert before hidden field.
code
function addfield() { var htm= $('extra_field').innerhtml; $('extra_field').insert({before:htm}); } another way
function addfield() { var htm= $('extra_field').innerhtml; $$('#orderchecklist_item_list tr').last('tr').insert({after:htm}); } $$('#orderchecklist_item_list').last('tr') find tr orderchecklist_item_list elements. returns '#orderchecklist_item_list' self.
Comments
Post a Comment