PHP+JQ+CSS3 网址收藏网站源码：添加、删除、锁定、模糊搜索功能

<div class='container'>
<h1>网址收藏</h1>
<form id='add-form' class='form'>
<h2>添加网址</h2>
<label for='name'>网址名:</label>
<input type='text' id='name' name='name' required>
<label for='url'>URL:</label>
<input type='url' id='url' name='url' required>
<button type='submit'>添加</button>
</form>
<h2>网址列表</h2>
<input type='text' id='search' placeholder='搜索...'>
<table id='list'>
<thead>
<tr>
<th>网址名</th>
<th>URL</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src='script.js'></script>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
}
.form {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.form label {
margin-bottom: 10px;
}
.form input {
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: none;
}
.form button {
padding: 10px;
background-color: #0078d7;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
#search {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: none;
}
table {
width: 100%;
border-collapse: collapse;
}
thead {
background-color: #0078d7;
color: #fff;
}
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
tbody tr:hover {
background-color: #e6f7ff;
}
td, th {
padding: 10px;
text-align: left;
}
td.actions button {
margin-right: 10px;
background-color: #0078d7;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
td.locked {
color: #a0a0a0;
font-style: italic;
}
</style>
<script>
$(document).ready(function() {
// 读取本地txt文件，初始化网址列表
var list = [];
$.get('list.txt', function(data) {
if (data) {
list = JSON.parse(data);
renderList();
}
});
<p>// 添加网址
$('#add-form').submit(function(event) {
event.preventDefault();
var name = $('#name').val();
var url = $('#url').val();
if (name &amp;&amp; url) {
var item = {
name: name,
url: url,
locked: false
};
list.push(item);
saveList();
renderItem(item);
$('#name').val('');
$('#url').val('');
}
});</p>
<p>// 删除网址
$('#list').on('click', '.delete-btn', function() {
var index = $(this).closest('tr').index();
list.splice(index, 1);
saveList();
$(this).closest('tr').remove();
});</p>
<p>// 锁定网址
$('#list').on('click', '.lock-btn', function() {
var index = $(this).closest('tr').index();
list[index].locked = !list[index].locked;
saveList();
renderList();
});</p>
<p>// 模糊搜索
$('#search').on('input', function() {
renderList();
});</p>
<p>// 渲染网址列表
function renderList() {
$('#list tbody').empty();
var search = $('#search').val().toLowerCase();
for (var i = 0; i &lt; list.length; i++) {
if (list[i].name.toLowerCase().indexOf(search) !== -1 || list[i].url.toLowerCase().indexOf(search) !== -1) {
renderItem(list[i]);
}
}
}</p>
<p>// 渲染单个网址
function renderItem(item) {
var tr = $('<tr>');
var nameTd = $('<td>').text(item.name);
var urlTd = $('<td>').html('&lt;a href='' + item.url + '' target='_blank'&gt;' + item.url + '</a>');
var statusTd = $('<td>');
if (item.locked) {
statusTd.addClass('locked').text('已锁定');
} else {
statusTd.text('正常');
}
var actionsTd = $('<td>').addClass('actions');
var deleteBtn = $('<button>').addClass('delete-btn').text('删除');
var lockBtn = $('<button>').addClass('lock-btn').text(item.locked ? '解锁' : '锁定');
actionsTd.append(deleteBtn, lockBtn);
tr.append(nameTd, urlTd, statusTd, actionsTd);
$('#list tbody').append(tr);
}</p>
<p>// 保存网址列表到本地txt文件
function saveList() {
$.post('save.php', {data: JSON.stringify(list)});
}
});
</script></p>
<?php
$data = $_POST['data'];
file_put_contents('list.txt', $data);
?>