Question

我有一个使用局部视图显示列表的视图。显示列表时显示正常。但是点击添加按钮我会添加动态行，这会混淆样式。它不断添加4列而不是它们旁边的列。我不确定可能是什么问题。任何帮助是极大的赞赏。感谢。

<script src="@Url.Content("~/Scripts/CompanyInfo.js?")@DateTime.Now.ToString()" type="text/javascript"> </script>    
@using (Html.BeginForm("SaveCompanyInfo", "CompanyInfo", FormMethod.Post, new { @class = "getcompany" }))
{
<table id="companyInfoDetailsTable" style="border: 0px" class="rounded-corner">
<tr>
<th scope="col" class="rounded-first">@resx.CompanyInfo_EinTin</th>
<th scope="col" class="rounded-q1">@resx.CompanyInfo_AcctNumber</th>
<th scope="col" class="rounded-q1">@resx.CompanyInfo_BizName</th>
<th scope="col" class="rounded-last">&nbsp;</th>
</tr>

@if (Model.Details != null)
{

foreach (var logDetails in Model.Details)
{
Html.RenderPartial("_CompanyInfo", logDetails);
}




}   

</table>
<p><input id="btnAdd" type="button" value="@resx.CompanyInfo_AddMoreItem" /></p>

部分视图：_CompanyInfo

    @using (Html.BeginCollectionItem("compdetails"))
{
<tr>
<div class="companyRow">
<td> @Html.TextBoxFor(x => x.EIN_TIN) </td>
<td> @Html.TextBoxFor(x => x.DUNS)</td>
<td> @Html.TextBoxFor(x => x.CompanyName)</td>
<td><input id="btnDelete" type="button" value="Delete" /></td>
</div>
</tr>    

}

点击添加按钮我将使用以下脚本添加动态行： $（document）.ready（function（）{

$("#btnAdd").click(function () {
var action = "/CompanyInfo/Add";
$.ajax({
url: action,
cache: false,
success: function (html) {
$("#companyInfoDetailsTable").append(html);

}
});
return false;
});



$("#btnDelete").live("click", function () {

//$(this).parent().parent().hide
$(this).parents("div.companyRow:first").remove();
return false;
});

样品：

<table border="1">
<tr>
<td>Row1</td>
<td>Row2</td>
<td>Row3</td>
<td>Delete</td>
</tr>
<table>

DynamicRow1
DynamicRow2
DynamicRow3
DynamicRow4
    Delete

添加回复的结果

        <table id="companyInfoDetailsTable" style="border: 0px" class="rounded-corner">
<tbody><tr>
<th scope="col" class="rounded-first">EIN/TIN</th>
<th scope="col" class="rounded-q1">Account Number</th>
<th scope="col" class="rounded-q1">Business Name</th>
<th scope="col" class="rounded-last">&nbsp;</th>
</tr>






<input type="hidden" name="compdetails.index" autocomplete="off" value="502b6140-dce8-4690-8d96-5b02b37957bd">
<tr>
<td> <input id="compdetails_502b6140-dce8-4690-8d96-5b02b37957bd__EIN_TIN" name="compdetails[502b6140-dce8-4690-8d96-5b02b37957bd].EIN_TIN" type="text" value="147852369"> </td>
<td> <input id="compdetails_502b6140-dce8-4690-8d96-5b02b37957bd__DUNS" name="compdetails[502b6140-dce8-4690-8d96-5b02b37957bd].DUNS" type="text" value=""></td>
<td> <input id="compdetails_502b6140-dce8-4690-8d96-5b02b37957bd__CompanyName" name="compdetails[502b6140-dce8-4690-8d96-5b02b37957bd].CompanyName" type="text" value="Duva Inc"></td>
<td><input id="btnDelete" type="button" value="Delete"></td>

</tr>    






<input type="hidden" name="compdetails.index" autocomplete="off" value="86e37493-ae57-4ba4-97df-92437c6eb33f">
<tr>
<td> <input id="compdetails_86e37493-ae57-4ba4-97df-92437c6eb33f__EIN_TIN" name="compdetails[86e37493-ae57-4ba4-97df-92437c6eb33f].EIN_TIN" type="text" value="987456321"> </td>
<td> <input id="compdetails_86e37493-ae57-4ba4-97df-92437c6eb33f__DUNS" name="compdetails[86e37493-ae57-4ba4-97df-92437c6eb33f].DUNS" type="text" value=""></td>
<td> <input id="compdetails_86e37493-ae57-4ba4-97df-92437c6eb33f__CompanyName" name="compdetails[86e37493-ae57-4ba4-97df-92437c6eb33f].CompanyName" type="text" value="Judy LLC"></td>
<td><input id="btnDelete" type="button" value="Delete"></td>

</tr>    


</tbody>




<input type="hidden" name="compdetails.index" autocomplete="off" value="ad5a9c47-8132-4744-809b-3d18cca63966">

<div class="companyRow">
<input id="compdetails_ad5a9c47-8132-4744-809b-3d18cca63966__EIN_TIN" name="compdetails[ad5a9c47-8132-4744-809b-3d18cca63966].EIN_TIN" type="text" value=""> 
<input id="compdetails_ad5a9c47-8132-4744-809b-3d18cca63966__DUNS" name="compdetails[ad5a9c47-8132-4744-809b-3d18cca63966].DUNS" type="text" value="">
<input id="compdetails_ad5a9c47-8132-4744-809b-3d18cca63966__CompanyName" name="compdetails[ad5a9c47-8132-4744-809b-3d18cca63966].CompanyName" type="text" value="">
<input id="btnDelete" type="button" value="Delete">
</div>
</table>

使用部分视图时，Jquery附加动态行会丢失样式 - MVC

0 个答案: