网址收藏夹 - 添加、删除、锁定、解锁网址，并支持搜索和排序 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>网址收藏夹</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="script.js"></script>
</head>
<body>
	<h1>网址收藏夹</h1>
	<div class="toolbar">
		<button id="add-btn">添加</button>
		<button id="delete-btn">删除</button>
		<button id="lock-btn">锁定</button>
		<button id="unlock-btn">解锁</button>
		<input type="text" id="search-input" placeholder="搜索">
	</div>
	<table id="url-table">
		<thead>
			<tr>
			    <th><input type="checkbox" id="select-all-checkbox"></th>
				<th><a href="?sort=name">名称</a></th>
				<th><a href="?sort=url">网址</a></th>
				<th><a href="?sort=status">状态</a></th>
			</tr>
		</thead>
		<tbody>
			<?php
			// 读取已保存的网址
			$url_file = 'urls.txt';
			if (file_exists($url_file)) {
				$urls = file($url_file, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
			} else {
				$urls = array();
			}
<pre><code>		// 网址排序
		if (isset($_GET['sort'])) {
			$sort = $_GET['sort'];
			switch ($sort) {
				case 'name':
					sortByName($urls);
					break;
				case 'url':
					sortByURL($urls);
					break;
				case 'status':
					sortByStatus($urls);
					break;
				default:
					break;
			}
		}

		// 输出网址表格
		foreach ($urls as $index =&gt; $url) {
			$locked = strpos($url, 'locked:') === 0;
			$url = $locked ? substr($url, 7) : $url;
			echo '&lt;tr&gt;';
			echo '&lt;td&gt;&lt;input type=&quot;checkbox&quot; name=&quot;url-checkbox&quot; value=&quot;' . $index . '&quot; ' . ($locked ? 'disabled' : '') . '&gt;&lt;/td&gt;';
			echo '&lt;td&gt;&lt;a href=&quot;' . $url . '&quot; target=&quot;_blank&quot;&gt;' . $url . '&lt;/a&gt;&lt;/td&gt;';
			echo '&lt;td&gt;' . ($locked ? '锁定' : '正常') . '&lt;/td&gt;';
			echo '&lt;/tr&gt;';
		}

		// 根据名称排序
		function sortByName(&amp;$urls) {
			usort($urls, function($a, $b) {
				$a = trim($a);
				$b = trim($b);
				return strcmp($a, $b);
			});
		}

		// 根据网址排序
		function sortByURL(&amp;$urls) {
			usort($urls, function($a, $b) {
				$a = trim($a);
				$b = trim($b);
				return strcmp($a, $b);
			});
		}

		// 根据状态排序
		function sortByStatus(&amp;$urls) {
			usort($urls, function($a, $b) {
				$aLocked = strpos($a, 'locked:') === 0;
				$bLocked = strpos($b, 'locked:') === 0;
				if ($aLocked &amp;&amp; !$bLocked) {
					return 1;
				} else if (!$aLocked &amp;&amp; $bLocked) {
					return -1;
				} else {
					return 0;
				}
			});
		}
		?&gt;
	&lt;/tbody&gt;
&lt;/table&gt;
&lt;div id=&quot;add-dialog&quot; class=&quot;dialog&quot;&gt;
	&lt;h2&gt;添加网址&lt;/h2&gt;
	&lt;form&gt;
		&lt;label&gt;网址：&lt;/label&gt;
		&lt;input type=&quot;text&quot; name=&quot;url-input&quot; required&gt;
		&lt;button type=&quot;submit&quot;&gt;添加&lt;/button&gt;
		&lt;button type=&quot;button&quot; class=&quot;close-btn&quot;&gt;取消&lt;/button&gt;
	&lt;/form&gt;
&lt;/div&gt;
&lt;div id=&quot;delete-dialog&quot; class=&quot;dialog&quot;&gt;
	&lt;h2&gt;删除网址&lt;/h2&gt;
	&lt;form&gt;
		&lt;p&gt;确认删除选中的网址吗？&lt;/p&gt;
		&lt;button type=&quot;submit&quot;&gt;删除&lt;/button&gt;
		&lt;button type=&quot;button&quot; class=&quot;close-btn&quot;&gt;取消&lt;/button&gt;
	&lt;/form&gt;
&lt;/div&gt;
&lt;div id=&quot;lock-dialog&quot; class=&quot;dialog&quot;&gt;
	&lt;h2&gt;锁定网址&lt;/h2&gt;
	&lt;form&gt;
		&lt;p&gt;确认锁定选中的网址吗？&lt;/p&gt;
		&lt;button type=&quot;submit&quot;&gt;锁定&lt;/button&gt;
		&lt;button type=&quot;button&quot; class=&quot;close-btn&quot;&gt;取消&lt;/button&gt;
	&lt;/form&gt;
&lt;/div&gt;
&lt;div id=&quot;unlock-dialog&quot; class=&quot;dialog&quot;&gt;
	&lt;h2&gt;解锁网址&lt;/h2&gt;
	&lt;form&gt;
		&lt;p&gt;确认解锁选中的网址吗？&lt;/p&gt;
		&lt;button type=&quot;submit&quot;&gt;解锁&lt;/button&gt;
		&lt;button type=&quot;button&quot; class=&quot;close-btn&quot;&gt;取消&lt;/button&gt;
	&lt;/form&gt;
&lt;/div&gt;
</code></pre>
</body>
</html>