当表中字段过多的时候，用户修改信息时，如果单独进入一个修改页面把每个字段都罗列出来，可用户有可能只修改某一个字段，这样一来用sql语句执行起来的速度就会大大降低。

为了更好的用户体验效果及程序的执行速度，不防试试下面的方法，先看截图：

<input type="button" value="修改" class="subcyanmini btn-update" data-table="tablename" data-filed="ziduan" data-id="1" data-valeu="值" data-title="修改名称"/>

这个是单独修改某一个字段

参数分别有：表明，字段名，id，值，修改名称

修改名称为弹出的层提示名称：如果是修改name可以为修改名称，修改title可以为修改标题，这个可以自定义。

这样一来在后台只需要写一条公用的sql语句就可以了：     

string  sql = string.Format("update {0} set {1}='{2}' where id={3} ", table, filed,zhi,id);

下面是删除的截图：

删除分单个删除和批量删除

 <input type="button" value="单个删除" class="subcyanmini btn-del"  data-table="tablename" data-id="1" data-title="删除信息"/>
 <input type="button" value="批量删除" class="subgraymini batch-del"  data-table="tablename"  data-title="删除信息"/>

参数说明：表明，id

批量删除的时候：需要获取用户选择的id，这个有很多方法，这里就不在啰嗦了~~

下面贴下js代码和CSS代码

JS：

/*
修改、删除信息
修改：只能单条单字段修改
删除：可单条删除和批量删除
*/
/*定义弹出框html*/
var html = '';
html += '<div id="hz_mask_layer"></div><div class="modal" id="changeChar"  >';
html+='<div class="modal-dialog" >';
html+='<div class="modal-content">';
html+='<div class="modal-header">';
html+='<a class="close close-model" ><span aria-hidden="true">×</span></a>';
html+='<h4 class="modal-title" id="gridSystemModalLabel"></h4></div>';
html+='<div class="modal-body update">';
html += '<input type="text" id="text_value" class="fm-text lh3" />';
html+='</div>';
html+='<div class="modal-body delete">您确定要删除吗？删除之后将不可恢复！</div>';
html+='<div class="modal-footer">';
html += '<button type="button" class="subgraymini close-model">取 消</button>   ';
html += '<button type="button" class="subcyanmini btn-sure">确 定</button>';
html += '</div></div></div>    ';
var state = null; //0删除 1修改
var table, filed, id, value, title = null;//表明，字段名，id，值，标题
$(function () {
    $("body").append(html);
    //修改弹出提示层
    $(".btn-update").click(function () {
        state = 1;
         table = $(this).attr("data-table");
         filed = $(this).attr("data-filed");
         id = $(this).attr("data-id");
         valeu = $(this).attr("data-valeu");
         title = $(this).attr("data-title");
        $(".modal-content .update").show();
        $(".modal-content .delete").hide();
        $("#text_value").val(valeu);
        $(".modal-title").html(title);
        $("#hz_mask_layer").fadeIn();
        $("#changeChar").css("top", "10px").animate({ "top": "500px" }, 500).show();
    });
    //关闭提示层
    $(".close-model,#hz_mask_layer").click(function () {
        closeModel();
    });
    //删除提示层
    $(".btn-del").click(function () {
        state = 0;
         table = $(this).attr("data-table");
         id = $(this).attr("data-id");
         title = $(this).attr("data-title");
        $(".modal-content .update").hide();
        $(".modal-content .delete").show();
        $(".modal-title").html(title);
        $("#hz_mask_layer").fadeIn();
        $("#changeChar").css("top", "10px").animate({ "top": "500px" }, 500).show();
    });
    //确定事件
    $(".btn-sure").click(function () {
        if (state == 0) {
            //执行删除方法
            $.post("update-del.ashx?act=del", { table: table, id: id },
            function (data) {
                if (data == 1) {
                    //成功
                } else {
                    //失败
                }
            });
        } else {
            //执行修改方法
            var v = $("#text_value").val();
            $.post("update-del.ashx?act=update", { table: table, id: id, filed: filed, value: v },
            function (data) {
                if (data == 1) {
                    //成功
                } else {
                    //失败
                }
            });
        }
    });
    //批量删除
    $(".batch-del").click(function () {
        var ids = "1,2,3,4,5,6,7,";
        table = $(this).attr("data-title");
        $.post("update-del.ashx?act=batchdel", { table: table, id: ids },
         function (data) {
             if (data == 1) {
                 //成功
             } else {
                 //失败
             }
         });
    });
});
//关闭弹出层
function closeModel() {
    $("#hz_mask_layer").fadeOut();
    $("#changeChar").hide();
}

CSS：

.modal {z-index:999; display:none; width:460px;left:50%; background:none;top:50%;margin-left:-230px!important;margin-top:-280px!important;margin-top:0px;position:fixed!important;position:absolute;}
.modal-content{position:relative;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5); -webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5)}
.modal-content .delete { display: none;}
 .modal-body{position:relative;padding:15px}
.modal-footer{padding:15px;text-align:right;border-top:1px solid #e5e5e5}
.close{float:right;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.35; position:relative;top:-10px;right:10px;color:inherit; -webkit-appearance:none;padding:0;cursor:pointer;background:0 0;border:0; outline:none}
.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer;filter:alpha(opacity=50);opacity:.90}
.modal-title {padding-left: 15px; }
#hz_mask_layer {background-color:#000;position:fixed;left:0;right: 0; top: 0;bottom: 0;z-index:10;  opacity: 0.50; z-index:9; display:none;   }

以上就就是全部代码了，本人不才，如有大神有更好的办法还请多指教~~