javascript - 从页面中删除行而不刷新页面

Question

我使用此方法从表中删除一行。我能够从数据库中删除该行并显示“状态”警报。但我必须刷新页面以从页面中删除行。我该怎么办？

<script type="text/javascript">
function DeleteRow(btnDel) {
    $.get('../ProtocolSummary/DeleteRowATList?id2=' + btnDel, function(data, status){
      alert("Status: " + status);
    });
    $(btnDel).closest("tr").remove();
}
</script>



***Html***


<tbody>
            <% var ATRowId = 0; foreach (var item in Model.List)
               {%>
        <tr style="text-align:center">
            <td><%=Html.TextAreaFor(m => m.List[RowId].Type, new { value = @Model.List[ATRowId].Type, @style = "width:260px;" })%>
                <%=Html.HiddenFor(x=>x.List[RowId].AssistiveId,Model.ATList[RowId].AssistiveId) %></td>
            <td><%=Html.TextAreaFor(m => m.List[RowId].Schedule, new { value = @Model.List[ATRowId].Schedule, @style = "width:260px;" })%></td>
            <td><%=Html.TextAreaFor(m => m.List[RowId].Storage, new { value = @Model.List[ATRowId].Storage, @style = "width:260px;" })%></td>
            <td style="width:50px"><input type="button" value="delete" class="btnDel" style="float:right;width:20px" onclick="DeleteRow(<%= item.AssistiveId%>)" /></td>
        </tr>
               <% ATRowId++;
               }%>
            </tbody>

Answer 1

第一件事(如果还没有完成，因为我只能看到你的部分 HTML):你必须输入 <tbody>里面<table>元素。

<table>
    <tbody>
        <tr style="text-align:center">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td style="width:50px">
                <input type="button" value="delete" class="btnDel" style="width:20px" onclick="DeleteRow(1)" />
            </td>
        </tr>
    </tbody>
</table>

然后，修改DeleteRow功能。您不能使用 btnDel 中的值访问任何元素，因为它不是任何元素的 id 或 class。但是您可以执行以下操作

function DeleteRow(btnDel) {
    var btn = event.target;
    $(btn).closest("tr").remove();
}

查看工作 fiddle

HTH