Question

每当我使用jQuery向表中添加一行时，该行最终会在表的底部。

我的项目使用的是ASP.NET MVC5和Bootstrap样式。它是VS2013 for MVC apps的默认项目模板。

我的表单如下：

<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.UserViewModels.First().Email)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.UserViewModels.First().FirstName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.UserViewModels.First().LastName)
            </th>
            <th>Actions</th>            
        </tr>
    </thead>
    <tbody>
        <tr>    
            <td>
                <input class="form-control text-box single-line" id="Email" name="Email" type="email" value="" />
            </td>
            <td>
                <input class="form-control text-box single-line" id="FirstName" name="FirstName" type="text" value="" />
            </td>
            <td>
                <input class="form-control text-box single-line" id="LastName" name="LastName" type="text" value="" />      
            </td>
            <td>
                <input class="check-box" id="Active" name="Active" type="checkbox" value="true" />
            </td>   
            <td>
                <input id="addNewUser" type="image" src="/Content/icons/save.png" alt="Create User" title="Create User" />      
            </td>
        </tr>
    </tbody>
    <tbody></tbody>
</table>

jquery脚本如下所示：

$(document).ready(function () {
    $("#addNewUser").click(AddUserListener);
}

function AddUserListener() {
    var postData = {
        Email: $("#Email").val(),
        FirstName: $("#FirstName").val(),
        LastName: $("#LastName").val(),         
    };

    $.ajax({
        url: '/Admin/CreateNewUser',
        type: 'POST',
        dataType: 'json',
        data: postData,
        success: function (data) {
            var newRow = "<tr id='" + data.Id + "'><td>" + data.Email + "</td><td>" + data.FirstName + "</td><td>" + 
                data.LastName + "</td></tr>";

            $(".table:first > tbody:last").prepend(newRow);

            $("#Email").val = "";
            $("#LastName").val = "";
            $("#Active").val = false;
        },
        error: function () {
            //TODO: Add error handling
        }

    }); //End of ajax call
}

我尝试了各种不同的方法将行添加到表格的顶部。它确实将行正确添加到第二个tbody，但如果该部分已经包含一行，则新行将添加到它下面。

它还会自动将电子邮件格式化为html mailto链接。

MVC5s中是否存在导致此问题的默认jQuery / Boostrap js文件，如果有，我该如何禁用它？

Answer 1

写$('.table').find('tbody').prepend(newRow);而不是$(".table:first > tbody:last").prepend(newRow);

这将在表

的开头添加行

请参阅fiddle

Answer 2

我们错误就是我自己。

输入类型图像默认情况下提交表单 - 因此AJAX请求在表单提交的同时运行。

通过提交表单来处理图像输入的方法是让AddUserListener函数返回false。

如果您不希望它们导致表单提交，则所有输入图像都应返回false。

使用jQuery动态添加行会在表的底部添加行

2 个答案: