php - Adding dynamic rows in html with javascript -
i experimenting following .js code adds form field dynamically page me :
var i=$('table tr').length; $(".addmore").on('click',function(){ addnewrow(); }); $(".addmany").on('click',function(){ addnewrow(); addnewrow(); }); $(document).on('keypress', ".addnewrow", function(e){ var keycode = e.which ? e.which : e.keycode; if(keycode == 9 ) addnewrow(); }); var addnewrow = function(){ html = '<tr>'; html += '<td><input class="case" id="caseno_'+i+'" type="checkbox"/></td>'; html += '<td><input type="text" data-type="productcode" name="data[invoicedetail]['+i+'][product_id]" id="itemno_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>'; html += '<td><input type="text" data-type="productname" name="data[invoicedetail]['+i+'][productname]" id="itemname_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>'; html += '<td><input type="text" name="data[invoicedetail]['+i+'][price]" id="price_'+i+'" class="form-control changesno" autocomplete="off" onkeypress="return isnumeric(event);" ondrop="return false;" onpaste="return false;"></td>'; html += '<td><input type="text" name="data[invoicedetail]['+i+'][quantity]" id="quantity_'+i+'" class="form-control changesno quanyitychange" autocomplete="off" onkeypress="return isnumeric(event);" ondrop="return false;" onpaste="return false;">'; html += '<input type="hidden" id="stock_'+i+'"/>'; html += '<input type="hidden" id="stockmaintainer_'+i+'" name="data[invoicedetail]['+i+'][stockmaintainer]" />'; html += '<input type="hidden" id="previousquantity_'+i+'"/>'; html += '<input type="hidden" id="invoicedetailid_'+i+'"/>'; html += '</td>'; html += '<td><input type="text" id="total_'+i+'" class="form-control totallineprice addnewrow" autocomplete="off" onkeypress="return isnumeric(event);" ondrop="return false;" onpaste="return false;"></td>'; html += '<td><input type="checkbox" data-type="staged" name="data[invoicedetail]['+i+'][staged]" id="staged_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>'; html += '</tr>'; $('table').append(html); $('#caseno_'+i).focus(); i++; } it works perfectly, , able add product lines in needed.
however, able add rows in between existing rows.
know how that?
right code executes below :
apples bananas oranges add row(button)
apples bananas oranges new item i want work when needed :
apples new item bananas oranges possibly via icon next each row, click on add row above or below said item.
sample of form :
<?php if(isset($invoice['invoicedetail'])&&!empty($invoice['invoicedetail'])){?> <?php foreach ( $invoice['invoicedetail'] $key=>$item){?> <tr> <td> <input class="case" type="checkbox"/> </td> <td><input value="<?php echo isset($item['product_id']) ? $item['product_id']: ''; ?>" type="text" data-type="productcode" name="data[invoicedetail][<?php echo $key;?>][product_id]" id="itemno_<?php echo $key+1?>" class="form-control autocomplete_txt" autocomplete="off"></td> <td><input value="<?php echo isset($item['productname']) ? $item['productname']: ''; ?>" type="text" data-type="productname" name="data[invoicedetail][<?php echo $key;?>][productname]" id="itemname_<?php echo $key+1?>" class="form-control autocomplete_txt" autocomplete="off"></td> <td><input value="<?php echo isset($item['price']) ? $item['price']: ''; ?>" type="number" name="data[invoicedetail][<?php echo $key;?>][price]" id="price_<?php echo $key+1?>" class="form-control changesno" autocomplete="off" onkeypress="return isnumeric(event);" ondrop="return false;" onpaste="return false;"></td> <td> <input value="<?php echo isset($item['quantity']) ? $item['quantity']: ''; ?>" type="number" name="data[invoicedetail][<?php echo $key;?>][quantity]" id="quantity_<?php echo $key+1?>" class="form-control changesno quanyitychange" autocomplete="off" onkeypress="return isnumeric(event);" ondrop="return false;" onpaste="return false;"> <input value="<?php echo isset($item['quantityinstock']) ? $item['quantityinstock']: ''; ?>" type="hidden" id="stock_<?php echo $key+1?>" autocomplete="off"/> <input value="0" type="hidden" id="stockmaintainer_<?php echo $key+1?>" name="data[invoicedetail][<?php echo $key;?>][stockmaintainer]" autocomplete="off"/> <input value="<?php echo isset($item['quantity']) ? $item['quantity']: ''; ?>" type="hidden" id="previousquantity_<?php echo $key+1?>" autocomplete="off"/> <input value="<?php echo isset($item['id']) ? $item['id']: ''; ?>" type="hidden" id="invoicedetailid_<?php echo $key+1?>" autocomplete="off"/> </td> <td><input value="<?php echo $item['price']*$item['quantity']; ?>" type="number" id="total_<?php echo $key+1?>" class="form-control totallineprice" autocomplete="off" onkeypress="return isnumeric(event);" ondrop="return false;" onpaste="return false;"></td> <td><input type="checkbox" <?php if(isset($item['staged']) && $item['staged'] == 1) echo "checked=\"checked\""?> data-type="checkbox" name="data[invoicedetail][<?php echo $key;?>][staged]" id="staged_<?php echo $key+1?>" class="form-control autocomplete_txt" autocomplete="off"></td> </tr> <?php } ?> <?php }else{?> <tr> <td><input class="case" type="checkbox"/></td> <td><input type="text" data-type="productcode" name="data[invoicedetail][0][product_id]" id="itemno_1" class="form-control autocomplete_txt" autocomplete="off"></td> <td><input type="text" data-type="productname" name="data[invoicedetail][0][productname]" id="itemname_1" class="form-control autocomplete_txt" autocomplete="off"></td> <td><input type="number" name="data[invoicedetail][0][price]" id="price_1" class="form-control changesno" autocomplete="off" onkeypress="return isnumeric(event);" ondrop="return false;" onpaste="return false;"></td> <td> <input type="number" name="data[invoicedetail][0][quantity]" id="quantity_1" class="form-control changesno quanyitychange" autocomplete="off" onkeypress="return isnumeric(event);" ondrop="return false;" onpaste="return false;"> <input type="hidden" id="stock_1" autocomplete="off"/> <input type="hidden" name="data[invoicedetail][0][stockmaintainer]" id="stockmaintainer_1" autocomplete="off"/> <input type="hidden" id="previousquantity_1" autocomplete="off"/> <input type="hidden" id="invoicedetailid_1" autocomplete="off"/> </td> <td><input type="number" id="total_1" class="form-control totallineprice addnewrow" autocomplete="off" onkeypress="return isnumeric(event);" ondrop="return false;" onpaste="return false;"></td> <td><input value="1" type="checkbox" name="data[invoicedetail][0][staged]" id="staged_1" class="form-control autocomplete_txt" autocomplete="off"></td> </tr> <?php } ?>
you consider making these rows sortable (with jqueryui) user can decide change order later if that's important.
otherwise think modification concept of code:
var addnewrow = function(element, type) { var html = '<tr>' // etc .... (type == 'after') ? element.after(html) : element.append(html); $('#caseno_'+i).focus(); i++; } // ever you're doing now.. addnewrow($('table'), 'append'); // maybe in click rule of (i assuming - nested) icon in tr, use .closest('tr') element. addnewrow($(this).closest('tr'), 'after'); to preserve numerical orders this:
var reorder = function() { var table = $('table'); table.children('tr').each(function(){ var tr = $(this); var = table.index(tr) + 1; // because index starts @ 0 tr.attr('data-some-attribute', 'new_value_'+i); } }; op wanted more of jquery see how might work together...
// define vars var table = $('table'); // try make more specific of selector../ var addrowbutton = $('#specific-button'); // function, missing parts "etc" added in: var addnewrow = function(element, type) { var html = '<tr>' // etc .... // don't forget add "add row button" html (type == 'after') element.after(html) : element.append(html); $('#caseno_'+i).focus(); i++; }; // re order table preserve row numbering var reorder = function() { table.children('tr').each(function(){ var tr = $(this); var = table.index(tr) + 1; // because index starts @ 0 tr.attr('data-some-attribute', 'new_value_'+i); } }; // have 1 add row button: addrowbutton.click(function(){ // call addnewrow addnewrow(table, 'append'); }); // assume you'll nest buttons add row below in current row.. table.find('.add-row-button').click(function(){ // call add row addnewrow($(this).closest('tr'), 'after'); // call reorder table reorder(); }); 
Comments
Post a Comment