在线记事本 - 简单易用，表格显示，添加删除笔记 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>在线记事本 - 简单易用</title>
	<meta charset="utf-8">
	<style type="text/css">
		body {
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
		}
<pre><code>	h1 {
		text-align: center;
		margin-top: 50px;
	}

	.container {
		max-width: 800px;
		margin: 50px auto;
		padding: 20px;
		border: 1px solid #ccc;
		border-radius: 10px;
	}

	.form {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
	}

	.form label, .form input[type=&quot;submit&quot;] {
		margin: 10px 0;
		font-size: 1.2rem;
	}

	.form input[type=&quot;text&quot;] {
		padding: 5px;
		font-size: 1.2rem;
		border-radius: 5px;
		border: 1px solid #ccc;
		width: 100%;
		max-width: 500px;
	}

	table {
		width: 100%;
		border-collapse: collapse;
		margin-top: 20px;
	}

	table th, table td {
		padding: 10px;
		border: 1px solid #ccc;
		text-align: center;
	}

	table th {
		background-color: #eee;
	}

	table td button {
		background-color: #f44336;
		color: #fff;
		border: none;
		padding: 5px 10px;
		border-radius: 5px;
		cursor: pointer;
	}

&lt;/style&gt;
</code></pre>
</head>
<body>
	<h1>在线记事本</h1>
	<div class="container">
		<form class="form" action="" method="POST">
			<label for="note">添加新的笔记:</label>
			<input type="text" id="note" name="note" required>
			<input type="submit" value="添加">
		</form>
<pre><code>	&lt;table&gt;
		&lt;thead&gt;
			&lt;tr&gt;
				&lt;th&gt;序号&lt;/th&gt;
				&lt;th&gt;笔记内容&lt;/th&gt;
				&lt;th&gt;操作&lt;/th&gt;
			&lt;/tr&gt;
		&lt;/thead&gt;
		&lt;tbody&gt;
			&lt;?php
				// 数据库配置
				$servername = &quot;localhost&quot;;
				$username = &quot;root&quot;;
				$password = &quot;&quot;;
				$dbname = &quot;notes&quot;;

				// 创建连接
				$conn = new mysqli($servername, $username, $password, $dbname);

				// 检测连接
				if ($conn-&gt;connect_error) {
				    die(&quot;连接失败: &quot; . $conn-&gt;connect_error);
				}

				// 添加新笔记
				if ($_SERVER[&quot;REQUEST_METHOD&quot;] == &quot;POST&quot;) {
					$note = $_POST[&quot;note&quot;];

					$sql = &quot;INSERT INTO notes (note) VALUES ('$note')&quot;;

					if ($conn-&gt;query($sql) === TRUE) {
					    echo &quot;&lt;script&gt;alert('新笔记添加成功！'); window.location.href='';&lt;/script&gt;&quot;;
					} else {
					    echo &quot;Error: &quot; . $sql . &quot;&lt;br&gt;&quot; . $conn-&gt;error;
					}
				}

				// 查询已有笔记
				$sql = &quot;SELECT * FROM notes&quot;;
				$result = $conn-&gt;query($sql);

				if ($result-&gt;num_rows &gt; 0) {
				    // 输出数据
				    $i = 1;
				    while($row = $result-&gt;fetch_assoc()) {
				        echo &quot;&lt;tr&gt;&quot;;
				        echo &quot;&lt;td&gt;&quot; . $i . &quot;&lt;/td&gt;&quot;;
				        echo &quot;&lt;td&gt;&quot; . $row[&quot;note&quot;] . &quot;&lt;/td&gt;&quot;;
				        echo &quot;&lt;td&gt;&lt;button onclick='deleteNote(&quot; . $row[&quot;id&quot;] . &quot;)'&gt;删除&lt;/button&gt;&lt;/td&gt;&quot;;
				        echo &quot;&lt;/tr&gt;&quot;;
				        $i++;
				    }
				} else {
				    echo &quot;&lt;tr&gt;&lt;td colspan='3'&gt;暂无笔记&lt;/td&gt;&lt;/tr&gt;&quot;;
				}
				$conn-&gt;close();
			?&gt;
		&lt;/tbody&gt;
	&lt;/table&gt;
&lt;/div&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
	// 删除笔记
	function deleteNote (id) {
		var confirmDelete = confirm(&quot;确定要删除这条笔记吗？&quot;);

		if (confirmDelete == true) {
			window.location.href = &quot;delete.php?id=&quot; + id;
		}
	}
&lt;/script&gt;
</code></pre>
</body>
</html>
<!-- delete.php 文件 -->
<?php
	// 数据库配置
	$servername = "localhost";
	$username = "root";
	$password = "";
	$dbname = "notes";

	// 创建连接
	$conn = new mysqli($servername, $username, $password, $dbname);

	// 检测连接
		if ($conn->connect_error) {
		die("连接失败: " . $conn->connect_error);
		}

	// 删除笔记
	$id = $_GET["id"];

	$sql = "DELETE FROM notes WHERE id=$id";

		if ($conn->query($sql) === TRUE) {
		    echo "<script>alert('笔记删除成功！'); window.location.href='';</script>";
		} else {
		    echo "Error: " . $sql . "<br>" . $conn->error;
		}

	$conn->close();
?>