writing-a-searchable-database-with-pure-html-css-and-js-15cg-优快云博客

本文链接：https://blog.youkuaiyun.com/u011082575/article/details/133348511

本文作者分享了如何仅使用HTML、CSS和少量JavaScript创建一个可搜索的艺术数据库，用于满足学术需求。通过实例展示了如何构造输入框、表格和搜索功能，尽管不是最佳实践，但对于不想学习SQL的开发者提供了备选方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原始地址：https://dev.to/micahlt/writing-a-searchable-database-with-pure-html-css-and-js-15cg

这是我创建 [https://micahlt.github.io/renart/] 的方法. 大约一周前，我在学校遇到了一个困难的情况。我有一个关于文艺复兴艺术的AP欧洲历史作业，需要我找到大量关于文艺复兴艺术的信息。我心想，“应该有一个基本的数据库包含这些信息。”完成作业后的凌晨12点，我决心找到一种可以为未来可能遇到同样问题的人提供解决方案的方法。我热爱HTML和CSS，不懂SQL（或其衍生语言），所以我需要用纯HTML和CSS（可能还有一点JavaScript）来构建一个“数据库”。下面是我根据自己的知识和从Stack Overflow上搜集到的一些内容所做的。
首先，我创建了一个新的GitHub仓库。我创建了一个index.html文件，从基本语法开始：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>My Database</title>
<style>
</style>
</head>
<body>
</body>
</html>

接下来，我创建了一个简单的输入框。

<input type="text" onkeyup="searchFunction()" placeholder="search here" title="search">

如果你对这里发生的事情不熟悉，我们正在创建一个默认的输入框，添加了占位文本“search here”。onkeyup指定当按下回车键并且输入框有值时调用一个JavaScript函数。

之后，我创建了一个表格：

<table align="center">
<tr class="header">
<th style="width:25%;">Title</th>
<th style="width:25%;">Artist</th>
<th style="width:25%;">Commisioner</th>
<th style="width:25%;">Completed</th>
</tr>
</table>

在这里，我正在构建表格的表头。由于JavaScript的编写方式，这部分内容不可搜索。我还将表格居中。在此之后，我只是在标题之后使用了另一个元素添加了一些行。

<tr>
<td>The Annunciation</td>
<td>Fra Angelico</td>
<td>Cosimo de' Medici</td>
<td>1446</td>
</tr>
</table>

你可以在每列中添加自己的数据（）。现在，接下来的部分对我来说很困难。我喜欢专注于HTML和CSS，但我喜欢假装JavaScript不存在。它与Python和Ruby相比，似乎更复杂。我在Stack Overflow上滚动了一段时间，直到我找到了完美的脚本：

<script>
function artFunction() {
// Declare starting variables
var input = document.getElementById("artInput");
var filter = input.value.toUpperCase();
var table = document.getElementById("artTable");
var trs = table.tBodies[0].getElementsByTagName("tr");
// Loop through rows
for (var i = 0; i < trs.length; i++) {
// Define the cells
var tds = trs[i].getElementsByTagName("td");
// hide the row
trs[i].style.display = "none";
// loop through row cells
for (var i2 = 0; i2 < tds.length; i2++) {
// if there's a match
if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {
// show the row
trs[i].style.display = "";
// skip to the next row
continue;
}
}
}
}
</script>

只需将此代码添加到的底部即可。我不能希望解释这段代码的工作原理。现在你完成了！这实际上并不是保持数据库最好的方法，因为你的HTML页面将随着每个添加的项目而增长。然而，如果你不想学习SQL，它还是有效的。
TL;DR- 如果你想在没有SQL的情况下构建一个“数据库”，请访问https://github.com/micahlt/renart并查看art.html文件。