在表中克隆和追加行

如何使用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”字段。我应该如何处理这个问题？

任何帮助，将不胜感激。

来源

2012-08-01 user793468

你不能在行上附加一行，追加行到表 – Musa 2012-08-01 18:39:26

@Musa纠正它。 – user793468 2012-08-01 18:43:29

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); 
    },

CNC中

虽然，当我在过去的尝试工作，例如这个，我已经创建的模板行。已存在但有显示的行：无。这样，如果你的表没有值，你总是可以知道模板行存在。

-edit- 如果你想在开始时添加新行，你可以使用prepend而不是append。第一行是$（“＃MyTableData tr”）。first（）。after（clone）

来源

2012-08-01 18:45:01 ChrisThompson

解决方案有效，但它在最后（最后一行）附加当前行（第一行），无论如何，我们可以将当前行作为第二行而不是最后一行追加？ – user793468 2012-08-01 20:33:08

在表中克隆和追加行

回答

相关问题