将th名称th插入表格中并且在添加时间赋予名称添加将全选thinput type=checkbox id=select-all-checkboxth增加功能将button id=unlock-btn解锁button增加功能只写需要优化的代码将优化的代码查到那个文件内容中即可不需要完整版indexphp!DOCTYPE htmlhtmlhead title网址收藏夹title meta charse
将
<thead>
<tr>
<th><input type="checkbox" id="select-all-checkbox"></th>
<th>名称</th> <!-- 新增 -->
<th>网址</th>
<th>状态</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();
}
// 输出网址表格
foreach ($urls as $index => $url) {
$locked = strpos($url, 'locked:') === 0;
$url = $locked ? substr($url, 7) : $url;
echo '<tr>';
echo '<td><input type="checkbox" name="url-checkbox" value="' . $index . '" ' . ($locked ? 'disabled' : '') . '></td>';
echo '<td>' . ($locked ? '<span style="color: red;">[已锁定]</span>' : '') . '<a href="' . $url . '" target="_blank">' . $url . '</a></td>'; // 修改
echo '<td>' . ($locked ? '锁定' : '正常') . '</td>';
echo '</tr>';
}
?>
</tbody>
将全选
$(document).ready(function() {
// 监听全选复选框点击事件
$('#select-all-checkbox').click(function() {
$('input[name="url-checkbox"]').prop('checked', $(this).prop('checked'));
});
// 监听复选框点击事件
$('input[name="url-checkbox"]').click(function() {
var checked = $('input[name="url-checkbox"]:checked');
$('#select-all-checkbox').prop('checked', checked.length === $('input[name="url-checkbox"]').length);
});
// 其他代码...
});
将增加功能:
$(document).ready(function() {
// 监听解锁按钮点击事件
$('#unlock-btn').click(function() {
var checked = $('input[name="url-checkbox"]:checked');
if (checked.length > 0) {
$('#unlock-dialog').show();
}
});
// 其他代码...
});
优化完毕后的代码如下:
index.php
<!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>名称</th>
<th>网址</th>
<th>状态</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();
}
// 输出网址表格
foreach ($urls as $index => $url) {
$locked = strpos($url, 'locked:') === 0;
$url = $locked ? substr($url, 7) : $url;
echo '<tr>';
echo '<td><input type="checkbox" name="url-checkbox" value="' . $index . '" ' . ($locked ? 'disabled' : '') . '></td>';
echo '<td>' . ($locked ? '<span style="color: red;">[已锁定]</span>' : '') . '<a href="' . $url . '" target="_blank">' . $url . '</a></td>';
echo '<td>' . ($locked ? '锁定' : '正常') . '</td>';
echo '</tr>';
}
?>
</tbody>
</table>
<div id="add-dialog" class="dialog">
<h2>添加网址</h2>
<form>
<label>网址:</label>
<input type="text" name="url-input" required>
<button type="submit">添加</button>
<button type="button" class="close-btn">取消</button>
</form>
</div>
<div id="delete-dialog" class="dialog">
<h2>删除网址</h2>
<form>
<p>确认删除选中的网址吗?</p>
<button type="submit">删除</button>
<button type="button" class="close-btn">取消</button>
</form>
</div>
<div id="lock-dialog" class="dialog">
<h2>锁定网址</h2>
<form>
<p>确认锁定选中的网址吗?</p>
<button type="submit">锁定</button>
<button type="button" class="close-btn">取消</button>
</form>
</div>
<div id="unlock-dialog" class="dialog">
<h2>解锁网址</h2>
<form>
<p>确认解锁选中的网址吗?</p>
<button type="submit">解锁</button>
<button type="button" class="close-btn">取消</button>
</form>
</div>
</body>
</html>
action.php
<?php
// 读取已保存的网址
$url_file = 'urls.txt';
if (file_exists($url_file)) {
$urls = file($url_file, FILE
原文地址: https://www.cveoy.top/t/topic/bm3h 著作权归作者所有。请勿转载和采集!