文章目录
-
- 网页显示
- 代码实现
- 常见问题
网页显示
整体样式
添加
添加一个王五，薪为5000
点击添加按钮 ，即可吧数据添加到table
删除
点击功能区的删除a标签
提示信息，点击确认删除成功
查询
这个查询是一个依据indexof的模糊查询
输入字符点击搜索，即可匹配显示，没有东西时点击搜索，可以查询全部
修改
点击修改按钮，将tr的内容转化为input标签里面的内容
这里吧9000改为1000
同时修改按钮消失，保存按钮显示
保存
点击保存按钮，保存更改的信息，同时保存按钮消失，修改按钮显示
基本功能如上；
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table,
th,
tr {
border-collapse: collapse;
border-spacing: 0;
}
table {
width: 50%;
}
td,
th {
border: 1px solid #bcbcbc;
width: 150px;
padding: 5px;
}
th {
background: white;
text-align: center;
}
tr:nth-of-type(odd) {
/* odd是 */
background: #aaffff;
}
tr:nth-of-type(even) {
background: #aaff7f;
}
</style>
<script src="./js/jquery-3.7.1.js"></script>
<script>
$(function () {
//删除
$("table").on('click','.delete_btn',function () {
//判断
if (confirm("是否确定删除?")) {
$(this).parent().parent().remove();
}
});
//查询
$("#select").click(function () {
//先获取input的内容
var input = $(this).prev().val();
//然后将table中tr下标大于0的遍历
$("table tr:gt(0)").each(function () {
//find()获得当前元素集合中每个元素的后代
//获得第二列td的名字集合
var name = $(this).find("td:eq(1)").html();
alert(name);
//判断td下标等于1的数据里是否包含输入框的内容
if (name.indexOf(input) == -1) {
$(this).hide();
} else {
$(this).show();
}
});
});
//增加
$("#insert").on("click",function () {
//先得到id
var id = parseInt($("table tr:last td:first").html());
id += 1;
//得到name和age
//prev()获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。
var name = $(this).prev().prev().val();
var age = $(this).prev().val();
if (name != "" && age != "") {
var trs = "<tr><td>" + id + "</td><td>" + name + "</td><td>" + age + "</td><td><a href='#' style='display: none;' class='save_btn'>保存</a><a href='#' class='update_btn'>修改</a> <a href='#' class='delete_btn'>删除</a></td></tr>";
$("table").append(trs);
var name = $(this).prev().prev().val("");
var age = $(this).prev().val("");
} else {
confirm("请补全信息");
}
});
//修改
$("table").on('click','.update_btn',function () {
//现将按钮切换
$(this).hide();
$(this).prev().show();
// 找到下标小于3的td
var tds = $(this).parent().parent().find("td:lt(3)");
//将下标小于3的td遍历
$(tds).each(function () {
//设置为输入框
var input = "<input type='text' value = '" + $(this).html() + "'>"
$(this).html(input);
});
});
//保存
$("table").on('click','.save_btn',function () {
//得到input框
var tds = $(this).parent().parent().find("td:lt(3) input");
var flag = true;
//遍历
$(tds).each(function () {
if ($(this).val() == "") {
flag = false;
}
});
if (!flag) {
confirm("请补全内容");
return;
}
//如果flag为true
$(tds).each(function () {
$(this).parent().html($(this).val());
})
$(this).hide();
$(this).next().show();
//前面的同辈prve//后面的同辈next
});
});
</script>
</head>
<body>
<p>
<input type="text">
<a href="#" id="select">查询</a>
</p>
<table border="1" id="table">
<tr>
<th>ID</th>
<th>姓名</th>
<th>薪水</th>
<th>功能</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>8000</td>
<td>
<a href="#" class="save_btn" style="display: none;">保存</a>
<a href="#" class="update_btn">修改</a>
<a href="#" class="delete_btn">删除</a>
</td>
</tr>
<tr>
<td>2</td>
<td>李世</td>
<td>9000</td>
<td>
<a href="#" class="save_btn" style="display: none;">保存</a>
<a href="#" class="update_btn">修改</a>
<a href="#" class="delete_btn">删除</a>
</td>
</tr>
</table>
<input type="text">
<input type="text">
<input type="button" value="添加" id="insert">
</body>
</html>常见问题
一、jquery插件
使用 jQuery，您需要下载 jQuery 库，然后把它包含在希望使用的网页中。
jQuery 库：jQuery数据库，点击下载，不知道下载第几个的下载第一个即可，下载时，右键需要的jQuery，将他另存为到桌面，然后引用到文件中调用
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：
<head>
//在相同目录下时
<script src="jquery.js"></script>
</head>二、添加的数据不能修改删除
对于新添加的数据，我们对他的方法添加有两种方法
1.复制一行，同时复制上一行的方法属性
2.使用$("父级").on("click","方法名"，function（）{});
