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

Posted 2023-03-05

【中文标题】从页面中删除行而不刷新页面

【英文标题】：Delete row from the page without refreshing the page

【发布时间】：2015-08-09 00:14:18

【问题描述】：

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

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

【问题讨论】：

你能给你提供 HTML 吗？

@Manashvi Birla，为什么需要使用 ajax 从 DOM 中删除元素？

以免页面刷新

***.com/questions/170997/…

首先，删除操作是 POST，而不是 GET！根据您生成的查询字符串，btnDel 在字符串或数字中，而不是 html 元素，因此 $(btnDel) 将不起作用。显示表格中一行的 html

【参考方案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

【参考方案2】：

如果您的警报是正确的，那是因为它在您的承诺之内。 jQuery 返回一个承诺（回调），并且您试图在 AJAX 运行之前删除您的 tr。

我不确定你的 DOM 会如何正确，但我相信它会正确。

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

      //Now I can be deleted as I'm inside the promise
      $(btnDel).closest("tr").remove();
    );    

</script>

【参考方案3】：

我认为您在删除后再次将数据绑定到您的表/网格。所以你可以这样做：

<script type="text/javascript">
function DeleteRow(btnDel) 
$.get('../ProtocolSummary/DeleteRowATList?id2=' + btnDel, function(data, status)
    if(status=="active")
    
       $.get('../ProtocolSummary/BindRowATList',function(data)
         alert("Data had bind to the grid");
       );                                             
    
 $(btnDel).closest("tr").remove();
);


</script>

这里我正在考虑使用"BindRowATList" 函数将数据绑定到ProtocolSummary 控制器中的网格。

【参考方案4】：

我这样做的方法是为行设置一个 id 并将其传递给 delete 函数。

<tr id="rowId">
   <!-- some html -->
   <button type="button" class="deleteRow" onclick="DeleteRow('rowId')">Delete Row</button>
</tr>
<script>
function DeleteRow(rowId) 
    $.get('../ProtocolSummary/DeleteRowATList?id2=' + rowId, function(data, status)
      alert("Status: " + status);
      $("#"+rowId).remove();
    );    

</script>

此外，将删除函数保留在 $get 中。 我不使用表格，也没有使用此逻辑进行删除。但是这个逻辑适用于更新（为具有 id 的元素添加和删除类）。希望能帮助到你。