后端开发教程 - Java、Spring Boot 实战 - msg200.com
使用纯 HTML、CSS 和 JS 编写可搜索的“数据库”
这就是我创建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">
如果你不熟悉这里发生的事情，我们正在创建一个默认input文本框并添加占位符文本“在此处搜索”。指定当按下回车键并且有值onkeyup时，我们将调用一个 JavaScript 函数。input
在此之后，我创建了一个表：
<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>在标题后面添加了另一个元素，添加了一些行。
<tr>
<td>The Annunciation</td>
<td>Fra Angelico</td>
<td>Cosimo de' Medici</td>
<td>1446</td>
</tr>
</table>
您可以在每一列中添加自己的数据（<td>）。接下来的部分对我来说有点难。我喜欢专注于 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>
只需将其添加到您的 底部即可<body>。我甚至无法解释它的工作原理。现在您完成了！老实说，这不是保存数据库的最佳方法，因为您的 HTML 页面会随着您添加的每个项目而增长。但是，如果您不想学习 SQL，它还是有用的。
TL;DR-如果您想构建一个没有 SQL 的“数据库”，请访问https://github.com/micahlt/renart并查看该art.html文件。