PHP / Jquery Create and Manipulate Tables -
i'm looking way add additional rows table based on value selected dropdown list or slider..
taking basic table :
<html> <head> <title></title> </head> <body> <table border="1"> <thead><tr> <th>name</th> <th>a</th> <th>b</th> <th>c</th> <th>d</th> <th>e</th> <th>f</th> </tr> </thead><tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td><input type="checkbox"></td> </tr> </tbody> </table> <br> </body> </html> i'd add dropdown or slider allows user increase or decrease number of rows visible , can complete. when form submitted values submitted normal. idea how can ?
i'd use check box in last column allow user duplicate values except name first row row check.. possible ? if update row 1 others update ?
thanks advice, pointers or links gratefully received :)
here go. custom coding you
$(function(){ var $tbody = $("#tb1"),$firstrow=$("#tb1 tr").eq(0); $('#defaultslider').change(function(){ var val = this.value; $('#currentvalue').html(val); $tbody.find("tr:gt("+val+")").remove(); (var = $("#tb1 tr").length;i<val;i++) { $tbody.append('<tr><td></td><td></td><td></td><td></td><td></td><td></td><td><input type="checkbox" class="copy"/></td></tr>'); } }).change(); // trigger event on load, table populated: $firstrow.find("input[type=text]").each(function(i) { $(this).on("blur",function() { // or keyup if useful var val = $(this).val(); var idx = i; var $checked = $("#tb1 tr").find("input[type=checkbox]:checked"); $checked.each(function(i) { if (i>0) { // may want keep existing input // perhaps uncheck row if inout changed, overwrite $(this).closest("tr").find("input").eq(idx).val(val); } }); }); }); $tbody.on("change","tr .copy",function() { if (this.checked) { var $newrow = $firstrow.clone(true); $newrow.find("td:first input").val("") $(this).closest("tr").replacewith($newrow); } }); });
Comments
Post a Comment