//删除逻辑
$(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">×</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">×</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博主