前端-part11-Bootstrap初识
原创
1.一个增删改的练习
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>增删改</title>
<style>
.cover {
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 99;
position: fixed;
}
.modal {
height: 300px;
width: 500px;
background-color: white;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -150px;
z-index: 100;
position: fixed;
}
.the-form {
position: relative;
top: 20%;
left: 25%;
}
.submit-form label,
.dismiss {
margin: 10px;
}
.hide {
display: none;
}
</style>
</head>
<body>
<table border="1" class="table">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>钢铁侠</td>
<td>做炸弹</td>
<td>
<button class="edit">编辑</button>
<button class="delete">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>美国队长</td>
<td>做体操</td>
<td>
<button class="edit">编辑</button>
<button class="delete">删除</button>
</td>
</tr>
<tr>
<td>3</td>
<td>雷神</td>
<td>玩个锤子</td>
<td>
<button class="edit">编辑</button>
<button class="delete">删除</button>
</td>
</tr>
<tr>
<td>4</td>
<td>绿巨人</td>
<td>收保护费</td>
<td>
<button class="edit">编辑</button>
<button class="delete">删除</button>
</td>
</tr>
</tbody>
</table>
<div class="cover hide"></div>
<div class="modal hide">
<div class="the-form">
<p class="name">姓名
<input type="text">
</p>
<p class="hobby">爱好
<input type="text">
</p>
<br>
<button class="submit-form">提交</button>
<button class="dismiss">取消</button>
</div>
</div>
<br>
<button id="add">新增</button>
<script src="jquery-3.3.1.js"></script>
<script>
var flag = null; // 声明一个全局的变量，控制新增或者编辑
function add() {
$(".cover,.modal").addClass("hide") // 增加隐藏样式函数
}
function rmv() {
$(".cover,.modal").removeClass("hide"); // 删除隐藏样式函数
}
$(".dismiss").click( // 给取消按钮绑定事件
function () {
add();
}
);
$("table").on("click", ".delete", function () { // 删除功能
var $allEle = $(this).parent().parent().nextAll();
$allEle.each(function () {
var num = $(this).children().first().text();
console.log(num);
$(this).children().first().text(num - 1) // 对被删除的下面的行数全部 -1 ，保证序号的连贯
});
$(this).parent().parent().remove()
});
$("#add").click(function () { // 增加一行的
rmv();
});
$("table").on("click", ".edit", function () { // 编辑按键
rmv();
var name = $(this).parent().parent().children().eq(1).text(); // 获取 名字 的文本
var hobby = $(this).parent().parent().children().eq(2).text(); // 获取 爱好 的文本
$(".name input").val(name); // 将 名字 放进编辑框
$(".hobby input").val(hobby); // 将 爱好 放进编辑框
flag = $(this).parent().parent();
});
$(".submit-form").click(function () {
if (flag) { // flag 为真，则代表是编辑
var newName = $(".name input").val(); // 获取编辑后的名字
var newHobby = $(".hobby input").val(); // 获取编辑后的爱好
flag.children().eq(1).text(newName); // 把编辑之后的名字放回原处
flag.children().eq(2).text(newHobby); // 把编辑之后的爱好放回原处
flag=null; // 释放flag资源，否则影响新增功能的使用
} else {
var name = $(".name input").val();
var hobby = $(".hobby input").val();
var newNum = $("table").find("tr").length; // 获取编号
var newEle = document.createElement("tr");
newEle.innerHTML = `
<td>${newNum}</td>
<td>${name}</td>
<td>${hobby}</td>
<td>
<button class="edit">编辑</button>
<button class="delete">删除</button>
</td>
`;
$("table tbody").append(newEle);
}
add();
})
</script>
</body>
</html>2.Bookstrap...复制粘贴...复制粘贴...link导入bookstrap.css，分分列，然后往里面贴
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
