javascript - How to add a row in a table -
this table looks beginning
what trying make row whenever click "add button" (the green 1 on rightmost). have 2 "add button", 1 add row containing select category (this should put below item/specification row) , other 1 add row item/specification. using boostrap, btw.
however, output looks this
this code (view):
<div class="container table-responsive col-sm-12"> <form enctype="multipart/form-data" data-parsley-validate=""> <table class="table table-striped" id="mytable"> <thead> <tr> <th class="text-nowrap text-center">category</th> <th class="text-nowrap text-center col-sm-5">item/specification</th> <th class="text-nowrap text-center col-sm-1">unit</th> <th class="text-nowrap text-center">qty</th> <th class="text-nowrap text-center" id="th-item">schedule/milestone <table class="milestone-table text-nowrap"> <tr> <th>jan</th> <th>feb</th> <th>mar</th> <th>apr</th> <th>may</th> <th>jun</th> <th>jul</th> <th>aug</th> <th>sep</th> <th>oct</th> <th>nov</th> <th>dec</th> </tr> </table> </th> <th class="text-nowrap text-center col-sm-1">unit price</th> <th class="text-nowrap text-center col-sm-1">subtotal</th> <th></th> </tr> </thead> <tbody> <tr> <td class="text-nowrap text-center"> <form id="make_checkbox_select"> <div class="control-group"> <div class="controls"> <select name="category" id="category"> <option value="0">select category</option> </select> </div> </div> </form> </td> <td class="text-nowrap text-center"> <div class="control-group"> <div class="controls"> <select name="items" id="items" class="col-sm-11"> <option value="0">select item</option> </select> </div> </div> </td> <td> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width1" /> </td> <td class="td-pad"> <table class="milestone-table"> <tr class="text-nowrap text-center"> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> </tr> </table> </td> <td> </td> <td> </td> <td> <span class="table-add glyphicon glyphicon-plus"></span> </td> </tr> <!--second row--> <tr> <td class="text-nowrap text-center"> </td> <td class="text-nowrap text-center"> <div class="control-group"> <div class="controls"> <select name="items" id="items" class="col-sm-11"> <option value="0">select item</option> </select> </div> </div> </td> <td> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width1" /> </td> <td class="td-pad"> <table class="milestone-table"> <tr class="text-nowrap text-center"> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> </tr> </table> </td> <td> </td> <td> </td> <td> <span class="table-add1 glyphicon glyphicon-plus"></span> </td> </tr> <!--hidden row--> <tr class="hide"> <td class="text-nowrap text-center"> <form id="make_checkbox_select"> <div class="control-group"> <div class="controls"> <select name="category" id="category"> <option value="0">select category</option> </select> </div> </div> </form> </td> <td class="text-nowrap text-center"> <div class="control-group"> <div class="controls"> <select name="items" id="items" class="col-sm-11"> <option value="0">select item</option> </select> </div> </div> </td> <td> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width1" /> </td> <td class="td-pad"> <table class="milestone-table"> <tr class="text-nowrap text-center"> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> <td class="text-nowrap text-center"> <input type="number" placeholder="0" min="0" class="td-width" /> </td> </tr> </table> </td> <td> </td> <td> </td> <td> <span class="table-add glyphicon glyphicon-plus"></span> </td> </tr> </tbody> </table> </form> </div> this js:
<script> $(document).ready(function () { var id = 0; // add button functionality $("table.#mytable span.table-add").click(function () { id++; var master = $(this).parents("table.#mytable"); // new row based on prototype row var prot = master.find(".hide").clone(); prot.attr("class", "") prot.find(".id").attr("value", id); master.find("tbody").append(prot); }); // remove button functionality $("table.mytable span.table-remove").live("click", function () { $(this).parents("tr").remove(); }); }); </script> **this css:** .milestone-table { table-layout: fixed; width: 421px; margin-left: -9px; } .milestone-table th { width: 35px; display: inline-block; } .milestone-table td { width: 30px; display: inline-block; margin: 0px; margin-top: 0px; } .td-width { width: 30px; } .td-width1 { width: 40px; } #th-item { width: 416px; } thanks alot. :)
Comments
Post a Comment