0

如何使用 jquery 执行以下操作？

我有一个三行和一个标题行的表。像这样：当用户在“StudentId”字段中输入数据时，使用 jquery-Ajax 从数据库中填充“StudentFirstName”和“StudentLastName”。我想要实现的是，在第一行文本框中输入 studentId 后，我想克隆第一行并将其附加为第二行，然后清除第一行中的数据。

她是我的表结构：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%@ Import Namespace="MyModel.Model" %>
<div>
<table id="MyTableHeaders">
        <tr>
            <th>
                StudentId
            </th>
            <th>
                StudentFirstName
            </th>
            <th>
                StudentLastName
            </th>            
        </tr>
    </table>
</div>

<div>
<table id="MyTableData">
        <tr>
            <td>
                <input name="StudentId"/>
            </td>
            <td>
                <input name="StudentFirstName"/>
            </td>
            <td>
                <input name="StudentLastName"/>
            </td>            
        </tr>    
</table>
</div>

这是我的jQuery：

$('input[name="StudentId"]').focusout(function (e) {
    e.preventDefault();
    var link = '/Student/DisplayStudentDetails';
    $.ajax({
        type: 'POST',
        url: link,
        data: { id: $('input[name="StudentId"]').val() },
        dataType: 'json',
        success: function (result) {
            $('input[name="StudentFirstName"]').val(result.FirstName);
            $('input[name="StudentLastName"]').val(result.LastName);
            $("#MyTableData tr:first").clone().appendTo("#MyTableData");
            $("#MyTableData tr:first").find("input").attr("value", "").blur();
        },
        error: function (result) {
            alert("Failed")
        }
    });
});

我正在努力清除第一行中的数据并将数据保留在克隆行中。使用我的代码，它会清除所有行。

此外，我注意到克隆的行具有相同的字段名称，因此它将使用在第一行中输入的 studentId 更新所有克隆的“StudentFirstName”和“StudentLastName”字段。我应该如何处理这个？

任何帮助，将不胜感激。

4

1 回答 1

1 
    success: function (result) {
        var clone = $("#MyTableData tr:first").clone();
        clone.find('input[name="StudentId"]').val(result.FirstName);
        clone.find('input[name="StudentFirstName"]').val(result.FirstName);
        clone.find('input[name="StudentLastName"]').val(result.LastName);
        $("#MyTableData ").append(clone);
    },

-编辑-

虽然，当我过去尝试过这样的任务时，我已经创建了模板行。已存在但具有 display:none 的行。这样，如果您的表没有值，您总是可以知道模板行存在。

-edit- 如果你想在开头添加新行，你可以使用 prepend 而不是 append。或者第二行是 $("#MyTableData tr").first().after(clone)

于 2012-08-01T18:45:01.620 回答