先来看看下面实时效果演示：

用户点击编辑时，在点击行下动态产生一行。编辑铵钮变为disabled。
新产生的一行有更新和取消的铵钮，点击“取消”铵钮，删除刚刚动态产生的行。编辑铵钮状态恢复。

更新与删除铵钮功能没有什么特别的。

 在ASP.NET MVC视图html代码如下，普通的表格table，普通的html标签：

删除的铵钮功能：

$('.Delete').click(function () {            var flag = confirm('你确认是否删除记录？');            if (flag) {                var tr = $(this).closest('tr');                var obj = {};                obj.Ltc_nbr = tr.find('.SelectSingle').val();                $.ajax({                    type: 'POST',                    url: "/Highway/LandTransportationCityDelete",                    dataType: 'json',                    data: JSON.stringify(obj),                    contentType: 'application/json; charset=utf-8',                    success: function (data, textStatus) {                        if (data.Success) {                            window.location.href = data.RedirectUrl;                        }                        else {                            alert(data.ExceptionMessage);                            return;                        }                    },                    error: function (xhr, status, error) {                        alert("An error occurred: " + status + "nError: " + error);                    }                });            }            return false;        });

Source Code

编辑的铵钮功能，需要动态产生一新行。处理每个字段的html的标签：

 $('.Edit').click(function (e) {            var tr = $(this).closest('tr')            var row = $('');            row.append($(''));            row.append($(''));            $selectCity = $('').attr({ name: 'city', class: 'selectcity' });            $("", { value: "", text: "" }).appendTo($selectCity);            $.getJSON("/Highway/GetCities", function (data) {                $.each(data, function (i, item) {                    if (item.City_nbr == tr.find('.city_key').val()) {                        $("", { value: item.City_nbr, text: item.City_Name,selected :"selected" }).appendTo($selectCity);                    }                    else {                        $("", { value: item.City_nbr, text: item.City_Name}).appendTo($selectCity);                    }                })            });            row.append($('').append($selectCity));            row.append($(''));            row.append($(''));            row.append($(''));            $cb = $('').attr({ type: 'checkbox', class: 'ckbIsActived', checked: tr.find('.ckbIsActived').is(':checked') == true ? 'true' : '' });            row.append($('').append($cb));            var $btnUpdate = $('').attr({ type: 'button', class: 'Update', value: '更新' });            row.append($('').append($btnUpdate));            var $btnCancel = $('').attr({ type: 'button', class: 'Cancel', value: '取消' });            row.append($('').append($btnCancel));            tr.after(row);            $(this).attr("disabled", "disabled");        });
Source Code
 
更新铵钮功能：

 

 $('table.city-list').delegate('.Update', 'click', function (event) {            var tr = $(this).closest("tr");            var obj = {};            obj.Ltc_nbr = tr.find('.city_key').val();            obj.City_nbr = tr.find('.selectcity').val();            obj.IsActived = tr.find('.ckbIsActived').is(':checked');            $.ajax({                type: 'POST',                url: "/Highway/LandTransportationCityUpdate",                dataType: 'json',                data: JSON.stringify(obj),                contentType: 'application/json; charset=utf-8',                success: function (data, textStatus) {                    if (data.Success) {                        alert("陆运城市更新成功。");                        window.location.href = data.RedirectUrl;                    }                    else {                        alert(data.ExceptionMessage);                        return;                    }                },                error: function (xhr, status, error) {                    alert("An error occurred: " + status + "nError: " + error);                }            });        });
Source Code
 
还一个取消铵钮功能：

 

$('table.city-list').delegate('.Cancel', 'click', function (event) {            var tr = $(this).closest("tr");            tr.prev().find('.Edit').removeAttr('disabled');            tr.remove();        });
Source Code