php与前端（二）：页面table的单元格的数据add和update

适合场景是修改的时候不跳页面，也不弹模态框，这么刁钻能实现吗？能，直接在，单元格内写表单修改，样式如下图

1：html代码部分
包括要修改的html和新增的html

<table id="btnShow" class="table table-bordered table-hover" style="word-break:break-all;" >    <thead>        <tr>            <th>行类型</th>            <th>排序</th>            <th>表达式描述</th>            <th>操作</th>        </tr>    </thead>    <tbody>        <volist name="rowArr" id="list">            <tr>                <td>                    <select  name="row_type-{$list.row_id}_{$list.tpl_id}" >                        <option value="1" <?php echo $list['row_type']==1 ? 'selected' : '' ?> >一维数据</option>                        <option value="2" <?php echo $list['row_type']==2 ? 'selected' : '' ?> >二维数据</option>                    </select>                </td>                <td>                    <input type="text" class="listorder" name="row_sort-{$list.row_id}_{$list.tpl_id}" value="{$list.row_sort}" >                </td>                <td>                    <textarea name="desc-{$list.row_id}_{$list.tpl_id}"></textarea>                </td>                <td>                    <button type="button" rel="{$list.row_id}_{$list.tpl_id}" class="button " data-target="btn-save">                        保存                    </button>                    <button type="button" rel="{$list.row_id}_{$list.tpl_id}" class="button " data-target="btn-delete">                        删除                    </button>                    <a href="__CONTROLLER__/cellList/tplId/{$list.tpl_id}/rowId/{$list.row_id}">                        <button type="button" rel="{$list.row_id}_{$list.tpl_id}" class="button" data-target="btn-edit">                            单元格                        </button>                    </a>                </td>            </tr>        </volist>        <!--新增部分html-->        <tr>            <td>                <select name="row_type" >                    <option value="1">一维数据</option>                    <option value="2">二维数据</option>                </select>            </td>            <td ><input type="text" name="row_sort" value="0" ></td>            <td>                <textarea name="desc-{$list.row_id}_{$list.tpl_id}"></textarea>            </td>            <td>                <button type="button" class="button" data-target="btn-save" isadd="true">                    确定新增                </button>            </td>        </tr>    </tbody></table>

2：js部分

<script>    $(function(){        $(document).on('click','button',function(e){            var _self = $(this);            var target = _self.attr('data-target');            var isAdd = _self.attr('isadd');            var rel = _self.attr('rel');            switch(target){                case 'btn-save':                    saveAction(_self,isAdd);                    break;                case 'btn-delete':                    deleteAction({                        row_id:rel.split('_')[0],                        tpl_id:rel.split('_')[1]                    });                    break;                case 'btn-edit':                    break;                case 'btn-listorder':                    listorderAction();                    break;            }        });        var tplId = $("#tplId").val();        var jump_url = "__CONTROLLER__/rowList/tplId/"+tplId;        var listorderAction = function(){            var data = $('.listorder').serializeArray();            if($(data).length >0){                postData = {}                $(data).each(function(i){                    var name = this.name.split('-')[1];                    name = name.split('_')[0];                    postData[name] = this.value;                });                var url = "__CONTROLLER__/listRowOrder";                $.post(url,postData,function(result){                    if(result.status == 1){                        return dialog.success(result.message,jump_url);                    }else if(result.status == 0){                        return dialog.error(result.message);                    }                },"json");            }else{                return dialog.error('没有排序的行');            }        };        var saveAction = function(_that,isAdd){            var opts  ={};            var tr = _that.parents('tr');            var url = '';            if(!isAdd){                var rel =_that.attr('rel');                opts['row_id']=rel.split('_')[0];                opts['tpl_id']=rel.split('_')[1];                url = 'rowUpdate';            }else{                opts['tpl_id']=$("#tplId").val();                url = 'rowAdd';            }            var texts = tr.find('input[type="text"]');            var selects = tr.find('select');            var radios = tr.find(':radio:checked');            var textarea = tr.find('textarea');            for(var i= 0,len=texts.length;i<len;i++){                var temp = $(texts[i]);                var val = temp.val();                var name = temp.attr('name').split('-')[0];                opts[name] = val;            }            for(var i= 0,len=selects.length;i<len;i++){                var temp = $(selects[i]);                var val = temp.val();                var name = temp.attr('name').split('-')[0];                opts[name] = val;            }            for(var i= 0,len=radios.length;i<len;i++){                var temp = $(radios[i]);                var val = temp.val();                var name = temp.attr('name').split('-')[0];                opts[name] = val;            }            for(var i= 0,len=textarea.length;i<len;i++){                var temp = $(textarea[i]);                var val = temp.val();                var name = temp.attr('name').split('-')[0];                opts[name] = val;            }            var post_url = "__CONTROLLER__/"+url;            $.post(post_url,opts,function(result){                if(result.status == 1){                    return dialog.success(result.message,jump_url);                }else if(result.status == 0){                    return dialog.error(result.message);                }            },'json');        }    });</script>