失去CSS样式动态添加表行 [英] losing css style in dynamically added table rows

问题描述

我已经读了很多有关从表中动态添加和删除行。我很相信我所做的一切都是正确的方式。

I've read a lot about adding and removing rows from tables dynamically. I'm very sure I have done everything the right way.

我的观点：

 <table id="LibList" class="table table-responsive table-condensed table-bordered">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Types)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Name)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Balance)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Payment)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Interest)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Teams)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Step3.Liabilities[0].Tenure)
                    </th>
                    <th>

                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.Step3.Liabilities) {
                    Html.RenderPartial("_LibListItem", item);
                }
            </tbody>
        </table>
        <p>
            <button type="button" class="btn btn-primary add-button">
                <span class="glyphicon glyphicon-plus"></span> Add New
            </button>
        </p>
    </div>

局部视图：

<tr>
@using (@Html.BeginCollectionItem("Liabilities")) {
    <td>
        @Html.DropDownListFor(model => model.Type, Model.Types, new { @class = "form-control selectpicker", id = "" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Name, new { @class = "form-control", id = "" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Balance, new { @class = "form-control auto", id = "" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Payment, new { @class = "form-control auto", id = "" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Interest, new { @class = "form-control", id = "", @type = "number" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Teams, new { @class = "form-control", id = "", @type = "number" })
    </td>
    <td>
        @Html.TextBoxFor(model => model.Tenure, new { @class = "form-control", id = "", @type = "number" })
    </td>
    <td>
        <button class="btn btn-primary remove-button" type="button" data-id="@Model.ID">
            <span class="glyphicon glyphicon-trash"></span>
        </button>
    </td>
}

附加功能

 $('.add-button').click(function () {
        var action = "/QuestionWizard/AddRow";
        $.ajax({
            url: action,
            cache: false,
            success: function (result) {
                $("#LibList").find("tbody").append($(result));
            }
        });
    });

所有这一切工作正常。不过，我现在遇到的问题是，当添加了一个新行，CSS类selectpicker'没有应用到下拉列表。

All of this works fine. However, the problem I'm having now is that when a new row is added, the css class "selectpicker' is not applied to the dropdown.

我使用引导选的风格我的下拉。这工作正常其他地方的应用。

I'm using bootstrap-select to style my dropdown. this works fine everywhere else in the application.

请谁能告诉我什么，我做错了。

Please can someone tell me what I'm doing wrong.

感谢。

推荐答案

只需拨打呈现selectpickers功能：

Just call the function that renders selectpickers:

  $('.selectpicker').selectpicker();

追加元素后：

$('.add-button').click(function () {
    var action = "/QuestionWizard/AddRow";
    $.ajax({
        url: action,
        cache: false,
        success: function (result) {
            $("#LibList").find("tbody").append($(result));
            $('.selectpicker').selectpicker();
        }
    });
});

---

修改

由于@Stephen Muecke在他的评论暗示这是更好地发现只有附加元素，只渲染它的内容，而不是重新呈现所有selectpickers。

As @Stephen Muecke suggested in his comment it is better to find only the appended element and render only it's content instead of re-rendering all selectpickers.

$("#LibList").find("tbody").find('.selectpicker').last().selectpicker();

这当然是更好的从性能的角度来看。

This is of course better from performance perspective.

这篇关于失去CSS样式动态添加表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！