0

我有一个使用局部视图显示列表的视图。显示列表时，它显示得很好。但是在单击添加按钮时，我正在添加动态行，这会弄乱样式。它不断在彼此下方而不是在它们旁边添加 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>

部分视图：_公司信息

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

0 回答 0