jquery - I want to add rows and locking again -

jquery - I want to add rows and locking again -

at first doing normal error-free locking.i want add together rows pressure level locking again. might errors ? happy if @ example. add together row > not works demo

html

<table class="color" cellpadding="2" cellspacing="2" id="mytable"> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>lock/unlock</td> <td>lock/unlock</td> <td>lock/unlock</td> </tr> <tr class="row"> <td>1</td> <td> <select name="select" id="selecta"> <option value="0"></option> <option value="1" selected>lock</option> <option value="2">unlock</option> </select> </td> <td> <input name="textfield" type="text" class="textfield" value="1" /> </td> <td> <input name="textfield" type="text" class="textfield" value="1" /> </td> <td> <input name="textfield" type="text" class="textfield" value="1" /> </td> </tr> <tr class="row"> <td>1</td> <td> <select name="select" id="selecta"> <option value="0"></option> <option value="1" selected>lock</option> <option value="2">unlock</option> </select> </td> <td> <input name="textfield" type="text" class="textfield" value="1" /> </td> <td> <input name="textfield" type="text" class="textfield" value="1" /> </td> <td> <input name="textfield" type="text" class="textfield" value="1" /> </td> </tr> <tfoot> <tr> <td colspan="5" style="text-align: left;"> <input type="button" id="addrow" value="add rows" /> </td> </tr> </tfoot> </table>

js

$(document).ready(function () { $('.row').each(function () { var $dropdown = $(this).find('#selecta'), $textfield = $(this).find('.textfield'); $dropdown.change(function () { if ($dropdown.val() != '1') { $textfield.removeattr('disabled'); } else { $textfield.attr('disabled', 'disabled').val(''); } }).trigger('change'); // added trigger calculate initial state }); }); $(document).ready(function () { var counter = 0; $("#addrow").on("click", function () { counter = $('#mytable tr').length - 2; var newrow = $('<tr class="row">'); var cols = ""; cols += ' <td>1</td><td><select name="select" id="selecta"><option value="0"></option><option value="1" selected>lock</option><option value="2">unlock</option></select> </td><td><input name="textfield" type="text" class="textfield" value="1" /></td><td><input name="textfield" type="text" class="textfield" value="1" /></td><td> <input name="textfield" type="text" class="textfield" value="1" /></td>'; cols += '<td><input type="button" value="x" ></td>'; newrow.append(cols); if (counter == 4) $('#addrow').attr('disabled', true).prop('value', "you've reached limit"); $("table.color").append(newrow); counter++; }); $("table.color").on("click", ".buttons", function (event) { $(this).closest("tr").remove(); calculategrandtotal(); counter -= 1 $('#addrow').attr('disabled', false).prop('value', "add rows"); }); });

i want add together rows pressure level locking again.

you not want utilize duplicate ids. have hence changed #selecta .selecta in markup , code.

since you're adding rows dynamically, have utilize event delegation when binding 'row locking' handler follows:

$(document).ready(function () { $(document).on('change','.selecta',function() { $(this).closest('.row').find('.textfield') .prop('disabled', (this.value == '1')) .val( this.value == 1 ? '' : this.value ); }); $('.selecta').change();// added trigger calculate initial state });

then 1 time new row added, have trigger alter on select in row:

newrow.find('.selecta').change();

working jsfiddle demo

i prefer manipulate disabled property instead of having add together , remove disabled attribute.

jquery