0

jqueryを使用して次のアクションを実行するにはどうすればよいですか？

3行とヘッダー行のあるテーブルがあります。次のようなものです。ユーザーが「StudentId」フィールドにデータを入力すると、「StudentFirstName」と「StudentLastName」がjquery-Ajaxを使用してデータベースから入力されます。私が達成したいのは、studentIdが最初の行のテキストボックスに入力されたら、最初の行を複製して2番目の行として追加し、最初の行からデータをクリアしたいということです。

彼女は私のテーブル構造です：

<%@ 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")
        }
    });
});

最初の行からデータをクリアし、複製された行にデータを保持するのに苦労しています。私のコードでは、すべての行をクリアします。

また、複製された行のフィールド名が同じであるため、複製されたすべての「StudentFirstName」フィールドと「StudentLastName」フィールドが最初の行に入力されたstudentIdで更新されることに気付きました。これにどのようにアプローチすればよいですか？

どんな助けでもいただければ幸いです。

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-最初に新しい行を追加する場合は、appendの代わりにprependを使用できます。または、2番目の行は$（ "＃MyTableData tr"）。first（）。after（clone）になります

于 2012-08-01T18:45:01.620 に答える