JQuery: How to correct this Add New Table Row Function -
i have html table , want tried write add new row function using jquery.but not working. here sample jquery code:
$('tr td input[type="checkbox"].yes').change(function() { $(this).closest('tr').find(":input:not(.yes)").prop('disabled', !this.checked); $(this).closest('tr').find(":input.no").prop('checked', !this.checked); }); $(".addmore").click(function() { var data = "<tr><td><input class='yes' type='checkbox' checked/></td><td><input type='text' value='4444'/></td><td><select><option>a</option><option>b</option></select></td><td><input type='text' value='dddd'/></td><td><select><option>a</option><option>b</option></select></td></tr>"; $('table').append(data); });
here link given bellow:
please help.thanks
i think looking adding rows in table clicking add more button. here working code adding rows in table.
$(".addmore").click(function(){ var data= "<tr><td><input class='yes' type='checkbox'/></td><td><input type='text' value=''/></td><td><select><option>a</option><option>b</option></select></td><td><input type='text' value=''/></td><td><select><option>a</option><option>b</option></select></td></tr>"; $('table tbody').append(data); }); $('tr td input[type="checkbox"].yes').change( function() { $(this).closest('tr').find(":input:not(.yes)").prop('disabled', !this.checked); $(this).closest('tr').find(":input.no").prop('checked', !this.check); });
table { border-collapse: collapse; } table, th, td { border: 1px solid black; padding: 2px; } table, th, td { text-align: center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table > <thead> <tr> <th>enable/disable</th> <th>text</th> <th>select</th> <th>textinput</th> <th>select 2</th> </tr> </thead> <tbody> <tr> <td><input class="yes" type="checkbox" checked/></td> <td><input type="text" value="1111"/></td> <td><select><option>a</option><option>b</option></select></td> <td><input type="text" value="aaaaa"/></td> <td><select><option>a</option><option>b</option></select></td> </tr> <tr> <td><input class="yes" type="checkbox" checked/></td> <td><input type="text" value="2222"/></td> <td><select><option>a</option><option>b</option></select></td> <td><input type="text" value="bbbb"/></td> <td><select><option>a</option><option>b</option></select></td> </tr> <tr> <td><input class="yes" type="checkbox" checked/></td> <td><input type="text" value="3333"/></td> <td><select><option>a</option><option>b</option></select></td> <td><input type="text" value="cccc"/></td> <td><select><option>a</option><option>b</option></select></td> </tr> </tbody> </table> <button type="button" class='addmore'>+ add more</button>
Comments
Post a Comment