jquery实现增删改查

//删除逻辑
$(document).on('click','.del',function(){   
        $(this).parents('tr').remove();
    });
    //添加逻辑
    $('.add').click(function(){
        $('#myModel').find('input').each(function(){
            $(this).val("");
        })
    })
    $(document).on('click','.aad',function(){
        var arr = [];
        var str = "";
       $('#myModel').find('input').each(function(){
           arr.push($(this).val());
        })
        str += "<tr><td>" + arr[0] + "</td><td>" + arr[1] + "</td><td>"+ arr[2] +"</td><td><button class='btn btn-primary rev' data-toggle='modal' data-target='#myModal'>修改</button><button class='btn btn-danger del'>删除</button></td></tr>";
       $('table').append(str);
    })
//修改逻辑
var _this;
    $('.rev').click(function(){
        var arr = [];
        _this = $(this).parents('tr').find('td:not(:last)');
        $(this).parents('tr').find('td:not(:last)').each(function(){
           arr.push($(this).text());
        })
        $('#myModal').find('input[type=text]').each(function(i){
            $(this).val(arr[i])
        })
    })
    $('.olk').click(function(){
        var str = [];
        $('#myModal').find('input[type=text]').each(function(i){
            str.push($(this).val());
        })
        _this.each(function(i){
            $(this).text(str[i]);
        })
    })
    //搜索
    $('.sreach').click(function(){
        var search_text = $('.swich').val();
        if(search_text.length == ""){
            alert("请先输入内容，在进行搜索！");
            $(".table tr").show();
        }else if($("table tr td:contains('"+ search_text +"')").length == 0){
            alert("未找到数据！");
            $(".table tr").hide(); //未找到数据让所有行隐藏
        }else{
            $(".table tr:not(:first)").hide()
            $(".table tr:contains('"+search_text+"')").show().find("input").prop("checked",true)
        }
    })

<div class="container" style="padding-top: 40px;">
        <div class="form-group">
            <div class="row">
                <div class="col-md-8">
                    <input type="text" class="form-control swich" />
                </div>
                <div class="col-md-3">
                    <button class="btn btn-danger sreach">搜索</button>
                    <button class="btn btn-default add" data-toggle="modal" data-target="#myModel">增加</button>
                </div>
            </div>
        </div>
        <table class="table table-bordered text-center">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>成绩</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>89</td>
                <td>
                    <button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button>
                    <button class="btn btn-danger del">删除</button>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>91</td>
                <td>
                    <button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button>
                    <button class="btn btn-danger del">删除</button>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>刘一</td>
                <td>80</td>
                <td>
                    <button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button>
                    <button class="btn btn-danger del">删除</button>
                </td>
            </tr>
        </table>
    </div>
    <!-- 修改的模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">修改信息</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <input type="text" placeholder="编号" id="reusrnum" class="form-control" />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="名字" id="reusrname" class="form-control" />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="成绩" class="form-control" id="rescore" />
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary olk" data-dismiss="modal">提交更改</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
    <!-- //增加的模态框 -->
    <div class="modal fade" id="myModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">增加信息</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <input type="text" placeholder="编号" id="reusrnum" class="form-control" />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="名字" id="reusrname" class="form-control" />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="成绩" class="form-control" id="rescore" />
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary aad" data-dismiss="modal">增加信息</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/bootstrap.js"></script>
    <script src="./common/index.js"></script>
    <script src="./common/index2.js"></script>
来自：https://blog.csdn.net/uncle_sixsix/article/details/82496630博主