使用JQuery動態添加表行可設置較小的行高

Question

我正在使用Jquery代碼在表tblPros中添加帶有兩個帶有幾個元素的新單元格的新行。 我得到的結果是一行小高度。 我正在使用相同的HTML代碼添加前幾行，但表格高度沒有問題。 我該如何改變？

我用來向表中動態添加新行的JQuery代碼是：

    $("#tblPros")
    .append($('<tr>')
        .append($('<td>')
            .append($('<div>')
                .attr('class', 'info-block block-info clearfix')
                .append($('<div>')
                .attr('data-toggle', 'buttons')
                .attr('class', 'btn-group bizmoduleselect')
                .attr('style', 'width:100%')
                .append($('<label>')
                .attr('class', 'btn btn-default')
                .attr('style', 'width:100%')
                .append($('<div>')
                .attr('class', 'bizcontent')
                .append($('<input>')
                .attr('type', 'checkbox')
                .attr('name', name)
                .attr('class', 'Pros')
                .attr('value', name)
                  .attr('style', 'width:400px')
                  .append($('<h5>')
                  .text(name))))))))

                  .append($('<div>').attr('width', '50%'))).attr('height', '100%');

我用來添加以前的復選框的原始HTML代碼是：

                            <div class="info-block block-info clearfix">
                                <div data-toggle="buttons" class="btn-group bizmoduleselect" style="width:100%">
                                    <label class="btn btn-default" style="width:100%">
                                        <div class="bizcontent">
                                            <input type="checkbox" name="Durable" class="Pros" value="Durable">
                                            <h5>Durable</h5>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </td>
                        <td width="50%">

                            <div class="info-block block-info clearfix">
                                <div data-toggle="buttons" class="btn-group bizmoduleselect" style="width:100%">
                                    <label class="btn btn-default" style="width:100%">
                                        <div class="bizcontent">
                                            <input type="checkbox" name="Versatile" class="Pros" value="Versatile">
                                            <h5>Versatile</h5>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </td>

                    </tr>

我得到的結果是灰色的行，高度很小，如圖所示：

Answer 1

您錯過了輸入元素后的方括號。 使用您當前的jquery代碼，其輸出如下：

<input type="checkbox" name="Versatile" class="Pros" value="Versatile">
    <h5>Versatile</h5>
</input>

UPDATE

您的代碼應該像；

$("#tblPros")
.append($('<tr>')
    .append($('<td>')
        .append($('<div>')
            .attr('class', 'info-block block-info clearfix')
            .append($('<div>')
            .attr('data-toggle', 'buttons')
            .attr('class', 'btn-group bizmoduleselect')
            .attr('style', 'width:100%')
            .append($('<label>')
            .attr('class', 'btn btn-default')
            .attr('style', 'width:100%')
            .append($('<div>')
            .attr('class', 'bizcontent')
            .append($('<input>')
            .attr('type', 'checkbox')
            .attr('name', name)
            .attr('class', 'Pros')
            .attr('value', name)
            .attr('style', 'width:400px'))
            .append($('<h5>')
            .text(name)))))))
            .append($('<div>').attr('width', '50%'))).attr('height', '100%');

更改的行：.attr（'style'，'width：400px'））

Answer 2

我找到了解決方案。 我在我的jquery代碼中錯過了一個右括號。 元素位於元素內部，這就是整個錯誤（感謝@Serdar）。 因此，在添加元素之前，我通過在jquery代碼中設置新的右括號來解決該問題。

新的JQuery代碼是：

  $("#tblPros") .append($('<tr>') .append($('<td>') .append($('<div>') .attr('class', 'info-block block-info clearfix') .append($('<div>') .attr('data-toggle', 'buttons') .attr('class', 'btn-group bizmoduleselect') .attr('style', 'width:100%') .append($('<label>') .attr('class', 'btn btn-default') .attr('style', 'width:100%') .append($('<div>') .attr('class', 'bizcontent') .append($('<input>') .attr('type', 'checkbox') .attr('name', name) .attr('class', 'Pros') .attr('value', name) .attr('style', 'width:400px') ).append($('<h5>') .text(name))))))) .append($('<div>').attr('width', '50%'))).attr('height', '100%'); 

此更改的解決方案/結果如下所示：