javascript - jQuery Clone Table Row After First Clone -
i have dynamic form huge select lists instead of querying database each select option. want clone 1 row outside php foreach loop has full set of options.
right doing this:
<table id="test" class="table"> <tr> <td> <select class="form-control" name="type[]"> <option value="20">auto rental</option> </select> </td> <td> <select class="form-control" name="distance_type[]"> <option value="1">nearby</option> </select> </td> </tr> <tr class="clone"> <td> <select class="readonly form-control" name="type[]" disabled> <option value="20">boat rental 1</option> <option value="20">boat rental 2</option> <option value="20">boat rental3</option> </select> </td> <td> <select class="readonly form-control" name="distance_type[]" disabled> <option value="1">nearby</option> <option value="1">far</option> <option value="1">10 miles</option> </select> </td> </tr> </table> <a class="add" href="#">add new row</a> javascript
$(".add ").on('click', function () { var clone = $('.clone').closest('tr')[0]; $(clone).clone().insertafter(clone); $('.readonly').attr("disabled", false) }); i disable select input doesn't submitted unless "add" button clicked. problem when click add button, ends enabling , adding field. pretty want hide first instance , when clicked enables , when click add again adds new fields, etc.
here live version https://jsfiddle.net/f4gp9uky/
tried stuff $('#el'):nth-child(n+3).hide(); doesn't work.
any suggestion appreciated.
you can like
var $clone = $('.clone'); $(".add ").on('click', function() { if ($clone.hasclass('hidden')) { $clone.removeclass('hidden').find('.readonly').prop("disabled", false) } else { $clone.clone().appendto($clone.parent()); } });.hidden { display: none }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="test" class="table"> <tr> <td> <select class="form-control" name="type[]"> <option value="20">auto rental</option> </select> </td> <td> <select class="form-control" name="distance_type[]"> <option value="1">nearby</option> </select> </td> </tr> <tr class="clone hidden"> <td> <select class="readonly form-control" name="type[]" disabled> <option value="20">boat rental 1</option> <option value="20">boat rental 2</option> <option value="20">boat rental3</option> </select> </td> <td> <select class="readonly form-control" name="distance_type[]" disabled> <option value="1">nearby</option> <option value="1">far</option> <option value="1">10 miles</option> </select> </td> </tr> </table> <a class="add" href="#">add new row</a>
Comments
Post a Comment