继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

AJAX对每一行数据进行增删改

更为炙热
关注TA
已关注
手记 3
粉丝 2
获赞 68
function modify(index){
        var table = $('#selecttable_'+index);
        var tds = table.children('td');
        var str = "<form role='role'>";
        str += "<label>课程id<input type='text' class='form-control' id='modal_id' value='"+tds[1].innerHTML+"' disabled></label>";
        str += "<label>课程代码<input type='text' class='form-control' id='modal_daima' value='"+tds[2].innerHTML+"'></label>";
        str += "<label>课程名称<input type='text' class='form-control' id='modal_mingcheng' value='"+tds[3].innerHTML+"'></label>";
        str += "<label>学分<input type='text' class='form-control' id='modal_xuefen' value='"+tds[4].innerHTML+"'></label>";
        str += "<label>课程性质<input type='text' class='form-control' id='modal_xingzhi' value='"+tds[5].innerHTML+"'></label>";
        str += "<label>课程类别<input type='text' class='form-control' id='modal_leibie' value='"+tds[6].innerHTML+"'></label>";
        str += "<label>建议修读学期<input type='text' class='form-control' id='modal_xueqi' value='"+tds[7].innerHTML+"'></label>";
        str += "</form>";

        $('#modal-title').html('修改课程信息')
        $('#modal-body').html(str);
        $('#modal_btn_2').show();
        $('#modal_btn_2').attr('onclick','baocun()');
        $('#modal').modal('toggle');
    }
    function baocun(){
        var daima = $('#modal_daima').value;
        var mingcheng = $('#modal_mingcheng').value;
        var xuefen = $('#modal_xuefen').value;
        var xingzhi = $('#modal_xingzhi').value;
        var leibie = $('#modal_leibie').value;
        var xueqi = $('#modal_xueqi').value;

        $.ajax({
            type:"POST",
            //传到后端的地址
            url:'aaaaaaa',
            data:'daima='+daima+'&mingcheng='+mingcheng+'&xuefen='+xuefen+'&xingzhi='+xingzhi+'&leibie='+leibie+'&xueqi='+xueqi,
            dataType:'JSON',
            success:function(result){
            //保存成功
                    var str="保存成功!"
                    $('#modal-body').html(str);
                    $('#modal_btn_2').hide();
                    $('#modal').modal('toggle');

            }       
        })
    }
    //删除
    function delet(index){
        var table = $('#selecttable_'+index);
        var tds = table.children('td');
        var str = "确定删除该课程?"

        $('#modal-title').html('删除课程信息')
        $('#modal-body').html(str);
        $('#modal_btn_2').html("确定");
        $('#modal_btn_2').show();
        $('#modal_btn_2').attr('onclick','del()');
        $('#modal').modal('toggle');
    }   
    function del(){
        var daima = $('#modal_daima').value;
        var mingcheng = $('#modal_mingcheng').value;
        var xuefen = $('#modal_xuefen').value;
        var xingzhi = $('#modal_xingzhi').value;
        var leibie = $('#modal_leibie').value;
        var xueqi = $('#modal_xueqi').value;

        $.ajax({
            type:"POST",
            //传到后端的地址
            url:'aaaaa',
            data:'daima='+daima+'&mingcheng='+mingcheng+'&xuefen='+xuefen+'&xingzhi='+xingzhi+'&leibie='+leibie+'&xueqi='+xueqi,
            dataType:'JSON',
            success:function(result){
            //删除成功
                    var str="保存成功!"
                    $('#modal-body').html(str);
                    $('#modal_btn_2').hide();
                    $('#modal').modal('toggle');
            }       
        });
    }
//jsp

<td class="center">
                            <button class="btn-sm btn-primary btn-action glyphicon glyphicon-search btn-info" onclick="view(1)" ></button>

                            <a class="btn-sm btn-primary btn-action glyphicon glyphicon-pencil btn-success" onclick="modify(1)"><i></i></a>
                            <!-- 修改数据模态框同查看 -->
                            <a class=" btn-sm btn-action glyphicon glyphicon-remove btn-danger" onclick="delet(1)"><i></i></a>
                        </td>

//model
<!-- 模态框 模态框内容js修改-->
    <div class="modal" id="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="modal-title"></h4>
                </div>
                <div class="modal-body" id="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="modal_btn_1">关闭</button>
                    <button type="button" class="btn btn-primary" id="modal_btn_2">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->  
打开App,阅读手记
6人推荐
发表评论
随时随地看视频慕课网APP