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

每当我使用jQuery向表中添加一行时，该行都会在表的底部结束

我的项目使用ASP.NETMVC5和引导风格。它是VS2013中MVC应用程序的默认项目模板

我的表单如下所示：

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

$(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
}

@DisplayNameFor（model=>model.UserViewModels.First（）.Email）
@DisplayNameFor（model=>model.UserViewModels.First（）.FirstName）
@DisplayNameFor（model=>model.UserViewModels.First（）.LastName）
行动

jquery脚本如下所示：

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

$(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
}

$（文档）.ready（函数（）{
$（“#addNewUser”）。单击（AddUserListener）；
}
函数AddUserListener（）{
var postData={
电子邮件：$（“#电子邮件”）.val（），
名字：$（“#名字”）.val（），
LastName:$（“#LastName”）.val（），
};
$.ajax({
url:“/Admin/CreateNewUser”，
键入：“POST”，
数据类型：“json”，
数据：postData，
成功：功能（数据）{
var newRow=”“+data.Email+“”+data.FirstName+“”
data.LastName+“”；
$（“.table:first>tbody:last”）.prepend（newRow）；
$（“#电子邮件”）.val=”“；
$（“#姓氏”）.val=”“；
$（“#活动”）.val=false；
},
错误：函数（）{
//TODO:添加错误处理
}
})；//ajax调用结束
}

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

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

MVC5的默认jQuery/Boostrap js文件中是否存在可能导致此问题的内容，如果是，如何禁用它？

编写

$（'.table'）。查找（'tbody'）。预结束（newRow）；

而不是

$（“.table:first>tbody:last”）。预结束（newRow）；

这将在表的开头添加行

---

请参阅

它将我们的错误归咎于我

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

取消提交表单时的图像输入的方法是让AddUserListener函数返回false

---

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

新记录是否会被添加到表中第二个tbody的顶部？我认为不会。问题不是将记录添加到表中-它添加得很好。问题是，为什么它会因为您的选择器而被添加到底部，请参见，我已经更新了我的小提琴作为回答，你可以使用选择器作为

$（'.table'）。查找（'tbody:last'）

选择器很好。当我使用Chromes JS调试器时，并在$（“#Email”）上设置一个断点。val=“”；我在表的顶部看到了该项-正是我想要的位置。当我单击“运行”之后，它会移到底部并重新格式化，以便纯文本电子邮件变成超链接。我想知道与ASP.NET MVC5捆绑的默认JS文件中是否有导致该问题的内容，以及如何禁用它，我可以这么说您的另一个代码正在影响您的表。查看您的代码，您将获得解决方案，如果您的解决方案是活动的，请给我链接，以便我可以查看。我知道还有其他因素影响它！！！我想知道是否有人知道与默认ASP.NET MVC5项目捆绑的JS的默认行为是什么，以及如何禁用正在发生的事情。任何人都可以复制。启动VS2013。创建一个ASP.NET MVC5项目。添加一个表。像我一样动态添加一行。它将再次发生。我正在寻找一些人，他们可以告诉我如何阻止它发生。我查看了JS文件（jquery和bootstrap），但找不到任何东西-因此这里的问题