给我用html实现在表格内搜寻内容的搜索代码,每一个表格td部分由上半部分的自定义图片和下半部分的标题、作者、创作时间和评分,每一个内容并列排列,整个作品含图片和下面解释说明部分都是超链接,鼠标移动到上面之后由作品说明代替那个地方,用户没点击搜索按钮或在键盘按下enter按键时展示所有内容,用户搜索后展示有用户搜索关键词的部分的内容,在加载时有加载中动画,加载完毕自动关闭,不是图片,运行起来能起到对应效果,动画美观,有能和用户互动的背景图,整个页面互相契合,美观漂亮,有科技感,有别的小组件,代码
时间: 2023-10-22 11:09:26 浏览: 42
以下是一个简单的示例代码,请根据您的实际需求进行修改和完善:
```
<!DOCTYPE html>
<html>
<head>
<title>Search Table Content</title>
<style>
/* 设置表格的样式 */
table {
border-collapse: collapse;
width: 100%;
max-width: 800px;
margin: 0 auto;
font-size: 16px;
text-align: center;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
img {
max-width: 50px;
max-height: 50px;
}
/* 设置搜索框的样式 */
.search-box {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
background-color: #eee;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
input[type="text"] {
height: 30px;
padding: 5px;
border: none;
border-radius: 5px;
margin-right: 10px;
width: 200px;
font-size: 16px;
}
input[type="submit"] {
height: 40px;
padding: 0 20px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
font-size: 16px;
cursor: pointer;
}
/* 设置加载动画的样式 */
.loader {
border: 8px solid #f3f3f3;
border-top: 8px solid #007bff;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 10;
display: none;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="search-box">
<form id="search-form">
<input type="text" name="keyword" placeholder="输入关键词" />
<input type="submit" value="搜索" />
</form>
<div class="loader"></div>
</div>
<table id="content-table">
<thead>
<tr>
<th>图片</th>
<th>标题</th>
<th>作者</th>
<th>创作时间</th>
<th>评分</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#"><img src="image1.jpg" alt="作品图片" /></a></td>
<td><a href="#" title="作品说明1">作品标题1</a></td>
<td>作者1</td>
<td>2021-01-01</td>
<td>8.5</td>
</tr>
<tr>
<td><a href="#"><img src="image2.jpg" alt="作品图片" /></a></td>
<td><a href="#" title="作品说明2">作品标题2</a></td>
<td>作者2</td>
<td>2021-02-01</td>
<td>9.0</td>
</tr>
<tr>
<td><a href="#"><img src="image3.jpg" alt="作品图片" /></a></td>
<td><a href="#" title="作品说明3">作品标题3</a></td>
<td>作者3</td>
<td>2021-03-01</td>
<td>7.5</td>
</tr>
<tr>
<td><a href="#"><img src="image4.jpg" alt="作品图片" /></a></td>
<td><a href="#" title="作品说明4">作品标题4</a></td>
<td>作者4</td>
<td>2021-04-01</td>
<td>8.0</td>
</tr>
</tbody>
</table>
<script>
// 获取表格和搜索框元素
var table = document.getElementById("content-table");
var searchForm = document.getElementById("search-form");
var loader = document.querySelector(".loader");
// 监听搜索表单的提交事件
searchForm.addEventListener("submit", function(event) {
event.preventDefault(); // 阻止默认提交行为
var keyword = this.elements.keyword.value; // 获取搜索关键词
if (!keyword) {
alert("请输入关键词!");
return;
}
loader.style.display = "block"; // 显示加载动画
// 遍历表格中的每一行,如果有匹配关键词的内容则显示,否则隐藏
for (var i = 1; i < table.rows.length; i++) {
var row = table.rows[i];
var isMatch = false;
for (var j = 1; j < row.cells.length; j++) {
var cell = row.cells[j];
var content = cell.textContent || cell.innerText;
if (content.indexOf(keyword) !== -1) {
isMatch = true;
break;
}
}
row.style.display = isMatch ? "" : "none";
}
loader.style.display = "none"; // 隐藏加载动画
});
</script>
</body>
</html>
```
注意事项:
- 本示例中使用了一些简单的 CSS 样式和 JavaScript 代码来实现搜索表格内容的功能,具体实现细节和样式可以根据您的实际需求进行修改和完善。
- 为了方便测试,示例中的表格内容和搜索关键词都是静态的,您需要自行改为动态获取数据。
- 为了让搜索功能更加优化,您可以将表格内容通过 AJAX 请求从后端获取,也可以通过其他技术实现实时搜索等功能。