如何在表格中添加行

Question

这是我的桌子从一开始的样子

我想做的是每当我单击“添加按钮”（最右边的绿色按钮）时再排一行。 因此，我有两个“添加按钮”，一个是添加包含选择类别的另一行（应将其放置在项目/规范行下方），另一个是为项目/规范添加另一行。 我正在使用boostrap，顺便说一句。

但是，我的输出看起来像这样

这是我的代码（视图）：

<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>

这是我的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");

        // Get a new row based on the 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 is my 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;
    }

非常感谢。 :)