在工作之前,学过一段jquery工作之后用vue比较多,就淡忘了了jquery了，而且也是听说bootstrap5版本中放弃了对jquery的依赖了。
最近啊,快毕业的女朋找找我写个增删改查的小demo，(醒醒你没有女朋友)。实在编不下去,好了我承认我没有女朋友！ 说到底还是自己腼腆，见女孩子说话就脸红了。哈哈 ，有点扯远了，之后我就去尝试写一个，写了个很差的半成品,哪位大神有闲工夫后 继续写下去。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>JQ表格增删改查</title>
<style>
#demo img{
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- 指示符 -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
</div>
<div class="carousel-item">
<img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">
</div>
<div class="carousel-item">
<img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
</div>
</div>
<!-- 左右切换按钮 -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<br>
<div class="alert alert-info text-center">
JQuery的增删改查小demo
</div>
<table class="table table-bordered table-hover text-center">
<thead>
<tr>
<th>ID</th>
<th>名字</th>
<th>年龄</th>
<th>学历</th>
<th>专业</th>
<th>删除</th>
<th>修改</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>23</td>
<td>本科</td>
<td>软件工程</td>
<td>
<button class="btn btn-danger del" data-toggle="modal" data-target="#myModal">删除</button>
</td>
<td>
<button class="btn btn-primary del" data-toggle="modal" data-target="#myModal">修改</button>
</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>24</td>
<td>硕士</td>
<td>计算机科学与技术</td>
<td>
<button class="btn btn-danger del" data-toggle="modal" data-target="#myModal">删除</button>
</td>
<td>
<button class="btn btn-primary del" data-toggle="modal" data-target="#myModal">修改</button>
</td>
</tr>
<tr>
<td>3</td>
<td>王麻子</td>
<td>27</td>
<td>博士</td>
<td>物联网工程</td>
<td>
<button class="btn btn-danger del" data-toggle="modal" data-target="#myModal">删除</button>
</td>
<td>
<button class="btn btn-primary del" data-toggle="modal" data-target="#myModal">修改</button>
</td>
</tr>
</tbody>
</table>
<div class="alert alert-success text-center">
表格中增加数据
</div>
<form>
<div class="form-group">
<label for="email">名字:</label>
<input requeired type="text" class="form-control" id="name" placeholder="请输入你的名字">
</div>
<div class="form-group">
<label for="pwd">年龄:</label>
<input requeired type="text" class="form-control" id="age" placeholder="请输入你的年龄">
</div>
<div class="form-group">
<label for="pwd">学历:</label>
<input requeired type="text" class="form-control" id="xl" placeholder="请输入你的学历">
</div>
<div class="form-group">
<label for="pwd">专业:</label>
<input requeired type="text" class="form-control" id="zy" placeholder="请输入你的专业">
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
<!-- 模态框 -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title text-center" style="width: 100%;">你确定要删除数据吗?</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body text-center">
<button class="btn btn-danger delete" data-dismiss="modal">确定</button>
<button class="ml-2 btn btn-info" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var id=""; //用户的编号
maxId=3;//最大的id数
$('table').on('click','.del',function(){
console.log(11);
id=$(this).index('.del');
})
$('.delete').click(function(){
$('tr').eq(id+1).fadeOut(500);
})
$(':input[type=submit]').click(function(){
var name=$('#name').val();
var age=$('#age').val();
var xl=$('#xl').val();
var zy=$('#zy').val();
maxId+=1;
$('table').append(`
<tr>
<td>${maxId}</td>
<td>${name}</td>
<td>${age}</td>
<td>${xl}</td>
<td>${zy}</td>
<td>
<button class="btn btn-danger del" data-toggle="modal" data-target="#myModal">删除</button>
</td>
</tr>
`);
return false;
})
});
</script>
</body>
</html>
原创文章 288
获赞 101
访问量 4万+