javascript - Add row with Jquery - Need to increment inputs names and onkeyup event caller -
i bit new jquery , still trying figure out how add (clone) table row @ end of table , increment input name="code10", onkeyup="recordtrans1(this.value)", , div (<div class="txthint3"></div>) inside table cell.
essentially want 3 things increment 1 (e.g : name="code11", onkeyup="recordtrans2(this.value)", <div class="txthint4"></div>, , on...)
the code have working add or remove table rows.
the problem have when add new table row, don't see in "view source" of page , name="codex", onkeyup, , div not incrementing.
i tried few different ways , can't seem figure out appreciated!
here code have far :
<script> jquery.fn.addclone = function() { return this.each(function() { // row cloningg var row = $(this).parents('tr'); var parent = {}; // use tbody or table parent if ( $(row).parents('tbody').length>0) { parent = $(row).parents('tbody'); } else { parent = $(row).parents('table'); } // inject clone var copy = $(row).clone(); $(copy).addclass('sadey'); $(copy).addclass('isclone'); $(parent).append( copy ); // remove last td , replace remove html $('.sadey').children('td:last').remove(); $('.sadey').append('<td><button class="btn btn-block btn-danger" onclick="$(this).killclone()">retirer</button></td>'); // increment ids , names var id = ($('.isclone').length + 1); $('.sadey').find('*').each(function() { var tempid = $(this).attr('id'); if (typeof tempid != 'undefined' && tempid!='') { $(this).attr('id',tempid + '_' + id); } var tempname = $(this).attr('name'); if (typeof tempname != 'undefined' && tempname!='') { $(this).attr('name',tempname + '_' + id); } }); // remove active tag $('.sadey').removeclass('sadey'); }); }; // remove row , re-index clones jquery.fn.killclone = function() { var row = $(this).parents('tr'); $(row).remove(); // re-index var id = 2; $('.isclone').each(function() { $(this).find('*').each(function() { var tempid = $(this).attr('id'); if (typeof tempid != 'undefined' && tempid!='') { tempid = tempid.split('_'); $(this).attr('id',tempid[0] + '_' + id); } var tempname = $(this).attr('name'); if (typeof tempname != 'undefined' && tempname!='') { tempname = tempname.split('_'); $(this).attr('name',tempname[0] + '_' + id); } }); id++; }); }; </script> and here's html :
<table class="table table-striped" id="financialdatatable"> <thead> <tr> <th style="width: 10%;">code</th> <th style="width: 5%;">qté</th> <th>produit</th> <th>description</th> <th>prix</th> <th style="width: 10%;">action</th> </tr> </thead> <tbody> <tr> <td> <div class="form-group"> <input type="text" id="code10" name="code16" class="form-control" onkeyup="recordtrans1(this.value)" /> </div> </td> <td> <div class="form-group"> <input type="text" name="qte16" class="form-control" value="1" /> </div> </td> <div id="txthint3"> <td></td> <td> </td> <td> </td> </div> <td><button type="button" class="btn btn-primary btn-sm" onclick="$(this).addclone();">ajouter un autre article</button></td> </tr> </tbody> </table>
you can not see updated source code by
right click -> view page source
browser loads source code in new tab again when click it. so,
instead of using use code inspector
right click -> inspect element
to onkeyup attribute updation, can modify part of code this:
$('.sadey').find('*').each(function() { var tempid = $(this).attr('id'); if (typeof tempid != 'undefined' && tempid!='') { $(this).attr('id',tempid + '_' + id); $(this).attr('onkeyup','recordtrans' + id + "()"); } var tempname = $(this).attr('name'); if (typeof tempname != 'undefined' && tempname!='') { $(this).attr('name',tempname + '_' + id); } }); 
Comments
Post a Comment