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.

my view:

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

Partial View:

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

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

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.

Thanks.

回答1:

Just call the function that renders selectpickers:

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

after appending element:

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

Edit

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.

来源：https://stackoverflow.com/questions/28792885/losing-css-style-in-dynamically-added-table-rows

标签

javascript

css

asp.net-mvc

asp.net-mvc-5

bootstrap-select