如何在新行中通过Ajax操作链接向表中添加行

Question

我是ASP MVC的新手，我遇到了问题。当我想在ajax的表中添加一行时，它看起来不像我想要的。这是我的代码

我的查看代码：

<table class="table" id="Table1">
            <tr>
                <th>Dr/Cr</th>
                <th>Ledger</th>
                <th>Dr Amount</th>
                <th>Cr Amount</th>
                <th>Actions</th>
                <th>Cur Balance</th>
            </tr>
            <tbody>
                @for (int i = 0; i < 4; i++)
                {
                    <tr>
                        <td>
                            @Html.DropDownList("DC", new List<SelectListItem>{
                       new SelectListItem{Text = "Dr", Value = "0"},
                       new SelectListItem{Text = "Cr", Value = "1"}
                   }, htmlAttributes: new { @class= "form-control" })
                        </td>
                        <td>@Html.DropDownList("Ledger")</td>
                        <td><input id="Text1" type="text" class="form-control" /></td>
                        <td><input id="Text2" type="text" class="form-control" /></td>
                        <td>
                            @Ajax.ActionLink("Add New Row", "AddNewRow", new AjaxOptions
                        {
                            UpdateTargetId = "addDetails",
                            InsertionMode = InsertionMode.InsertAfter,
                            HttpMethod = "GET",
                            OnSuccess = "successCall"
                        })
                            <input type="button" class="BtnMinus" value="Remove" />
                        </td>
                    </tr>
                }
                <div id="addDetails">Test</div>
            </tbody>
        </table>

我的JS

<script type="text/javascript">

    function successCall(result) {
        $("#Table1").append(result.data);
        window.alert('Test');
    }
</script>

问题是，当我单击“新建行”时，它将在表顶部而不是表内部添加新行。 如果我输入错误的代码，请帮助我...