IntroductionThe purpose of the codesnippets is delete a row with data or without(empty) in gridview using JQuery. As per we know Jquery is powerful library to manipulate client html,css and etc with less lines number of codes.
In this part, just I have added code to delete row, when user click delete image in last column in the gridview. Code <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How to Delete Row in GridView using JQuery in ASP.NET</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
// if you are click a delete image, then it will delete entire row of the clicked image
$('table td img.delete').click(function() {
$(this).parent().parent().remove();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="gvData" runat="server">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:TemplateField>
<ItemTemplate>
<asp:Image ImageUrl="" AlternateText="delete" runat="server" ID="delete" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</form>
</body>
</html>
That's all, just run and click delete image to delete a row.Hope helps and thank you |