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>

更新

您的代码应类似于

$("#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%');

此更改的解决方案/结果如下所示：

使用JQuery动态添加表行可设置较小的行高

2 个答案: