Jquery实现循环删除Reaper某一行

一、实现的效果图：（点击删除图标，juery实现删除整行）

二、MVC开发模式

SQLServer层

#region 删除
/// <summary>
/// 根据自动编号删除快递线路信息 (假删)
/// </summary>
/// <param name="Id">自动编号</param>
/// <returns></returns>
public int DelExpressLine(int Id)
{
    string sql = string.Format("update ExpressLine set Status=3 where Id={0}", Id);
    return DBUtility.SqlHelper.ExecuteNonQuery(ConnString.conn, CommandType.Text, sql, null);
}
#endregion

Models层——>DAL层

#region 删除快递线路
/// <summary>
/// 根据自动编号删除快递线路
/// </summary>
/// <param name="Id">自动编号</param>
/// <returns></returns>
public static int DelExpressLine(int Id)
{
    return new SQLServerDAL.ExpressLine().DelExpressLine(Id);
 }
#endregion

Controllers层

using System;
using System.Collections.Generic;
using System.Text.RegularExpressions;
using System.Web.Mvc;
namespace Wutong.WebSite.Controllers
{
    public class MemberController : BaseController
    { 
        /// <summary>
        /// 删除快递线路信息
        /// </summary>
        /// <param name="id">自动编号</param>
        /// <returns></returns>
        public JsonResult DelExpressLine(int id)
        {
            if (Models.DAL.ExpressLine.DelExpressLine(id) > 0)
            {
                return Json(new { code = 1, msg = "删除成功" });
            }
            else
            {
                return Json(new { code = 0, msg = "删除失败" });
            }
        }
 }

View层

@model IEnumerable<Wutong.Model.ExpressLine>
@{
    ViewBag.Title = "会员中心-快递线路管理";
}
<table width="720" class="tb2" cellpadding="0" cellspacing="0">
   <tr>
     <td class="dh strong" width="40"><input type="checkbox"></td>
     <td class="dh strong" width="150">出发地->到达地</td>                 
     <td class="dh strong" width="100"> 发布/刷新时间</td>
     <td class="dh strong" width="50">线路状态</td>
     <td class="dh strong" width="50">管理线路</td>
     <td class="dh strong" width="30">查看</td>  
     <td class="dh strong" width="30">修改</td>   
     <td class="dh strong" width="30">删除</td>                  
   </tr>
   @foreach (var item in Model)
     {  
       <tr data="@item.Id" data1="@item.IsSpecial">
         <td width="40"><input type="checkbox"></td>
         <td style="line-height: 15px;">@item.StartArea -> @item.ArriveArea</td>
         <td style="line-height: 15px;">@item.AddDate</td>
         <td style="line-height: 15px;">@((item.IsSpecial) == true ? "专线" : "非专线")</td>  
         <td><input type="button" value='@((item.IsSpecial) == true ?"关闭专线" : "开通专线")' class="btnUpdateSpecial"></td>    
         <td><a href="/ExpressLineInfo/@item.Id"><img src="/images/find.png" width="19" height="19"></a></td>
         <td><a href="/Member/PublishExpressLine/?type=get&[email protected]"><img src="/images/xg.png" width="16" height="16"></a></td>   
         <td><a href="javascript:void" class="del" ><img src="/images/del.png" width="19" height="19" title="删除"></a></td>             
       </tr>                
     }
</table>
@section Js{
<script type="text/javascript">
    $(function () {
          $(".del").click(function () {
            if (confirm("确实要删除此记录?")) {
　　　　　　　　　//获取表中tr
                var $this = $(this).parent().parent();
　　　　　　　　　//获取表中tr中data的值
                var _id = $this.attr("data");
                $.post("/Member/DelExpressLine/", { id: _id }, function (json) {
                    if (json.code == 1) {
                        //删除成功，移除这一行
                        $this.remove();
                        return true;
                    }
                    else {
                        //删除失败
                        alert(json.msg);
                        return false;
                   }
                });
            }
        });
    });
</script>
}

备注：1、Jquery循环访问Repeater中控件不能直接使用控件id访问字段，否则只能对repeater第一行有效，可以使用控件CSS类名访问，即(.del)。