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>