This script was something I didn’t finish, but it starts the process of dynamically adding elements by clicking on a button. You can select the row you want to delete from by clicking the checkbox and then by pressing the delete button delete only those rows.
This script works out of the box. Just cut and paste and it will work!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<style> .float-clear{clear:both;} .float-left{float:left;} #demo-outer {background-color: #F0F0F0;} .product-item input[type="text"] {padding: 5px;border:#ccc 1px solid;margin: 0px 10px;} .product-item input[type="checkbox"] {margin: 10px;} #product-header div{padding: 20px 5px 15px;margin: 0px 10px;} .col-heading{width:150px;font-size:16px;font-weight:bold;} .btn-action{padding:10px;} .btn-action input[type="button"]{padding:5px; border:#CCCCCC 1px solid;} </style> <SCRIPT src="http://code.jquery.com/jquery-2.1.1.js"></SCRIPT> <SCRIPT> function addMore() { $(".product-item:last").clone().insertAfter(".product-item:last"); } function deleteRow() { $('DIV.product-item').each(function(index, item){ jQuery(':checkbox', this).each(function () { if ($(this).is(':checked')) { $(item).remove(); } }); }); } </SCRIPT> <FORM name="frmProduct" method="post" action="saveclonekeywords.php"> <DIV id="demo-outer"> <DIV id="product-header"> <DIV class="float-left"> </DIV> <DIV class="float-left col-heading">Page Name</DIV> <DIV class="float-left col-heading">Keyword 1</DIV> <DIV class="float-left col-heading">Keyword 2</DIV> </DIV> <DIV id="product"> <DIV class="product-item float-clear" style="clear:both;"> <DIV class="float-left"><input type="checkbox" name="item_index[]" /></DIV> <DIV class="float-left"><input type="text" name="pagename[]" /></DIV> <DIV class="float-left"><input type="text" name="keyword1[]" /></DIV> <DIV class="float-left"><input type="text" name="keyword2[]" /></DIV> </DIV> </DIV> <DIV class="btn-action float-clear"> <input type="button" name="add_item" value="Add More" onClick="addMore();" /> <input type="button" name="del_item" value="Delete" onClick="deleteRow();" /> </DIV> </DIV> <input type="submit" class="myclass" name="mybutton" value="Save"> </form> |
