在线记事本 - 简单易用，快速记录你的想法 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>记事本</title>
	<meta charset="utf-8">
	<style type="text/css">
		table {
			border-collapse: collapse;
			margin: 20px auto;
		}
		table th, table td {
			border: 1px solid #ccc;
			padding: 5px;
		}
		input[type="text"] {
			padding: 5px;
			margin-right: 10px;
		}
		input[type="submit"] {
			padding: 5px 10px;
			background-color: #008CBA;
			color: #fff;
			border: none;
			cursor: pointer;
		}
		input[type="submit"]:hover {
			background-color: #005F6B;
		}
		.delete-btn {
			background-color: #f44336;
			color: #fff;
			border: none;
			padding: 5px 10px;
			cursor: pointer;
		}
		.delete-btn:hover {
			background-color: #d32f2f;
		}
	</style>
</head>
<body>
	<h1>记事本</h1>
	<form id="note-form">
		<label for="title">标题：</label>
		<input type="text" id="title" name="title">
		<label for="content">内容：</label>
		<input type="text" id="content" name="content">
		<input type="submit" id="add-btn" value="添加">
	</form>
	<table id="note-table">
		<thead>
			<tr>
				<th>序号</th>
				<th>标题</th>
				<th>内容</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>示例标题</td>
				<td>示例内容</td>
				<td><button class='delete-btn'>删除</button></td>
			</tr>
		</tbody>
	</table>
	<script type="text/javascript">
		var noteForm = document.getElementById("note-form");
		var noteTable = document.getElementById("note-table");
		var addBtn = document.getElementById("add-btn");
<pre><code>	addBtn.onclick = function() {
		var title = document.getElementById(&quot;title&quot;).value;
		var content = document.getElementById(&quot;content&quot;).value;
		var newRow = document.createElement(&quot;tr&quot;);
		newRow.innerHTML = &quot;&lt;td&gt;&quot; + (noteTable.rows.length - 1) + &quot;&lt;/td&gt;&lt;td&gt;&quot; + title + &quot;&lt;/td&gt;&lt;td&gt;&quot; + content + &quot;&lt;/td&gt;&lt;td&gt;&lt;button class='delete-btn'&gt;删除&lt;/button&gt;&lt;/td&gt;&quot;;
		noteTable.getElementsByTagName(&quot;tbody&quot;)[0].appendChild(newRow);
		document.getElementById(&quot;title&quot;).value = &quot;&quot;;
		document.getElementById(&quot;content&quot;).value = &quot;&quot;;
		var deleteBtns = document.getElementsByClassName(&quot;delete-btn&quot;);
		for (var i = 0; i &lt; deleteBtns.length; i++) {
			deleteBtns[i].onclick = function() {
				this.parentNode.parentNode.remove();
				updateNumber();
			}
		}
		return false;
	};

	var deleteBtns = document.getElementsByClassName(&quot;delete-btn&quot;);
	for (var i = 0; i &lt; deleteBtns.length; i++) {
		deleteBtns[i].onclick = function() {
			this.parentNode.parentNode.remove();
			updateNumber();
		}
	}

	function updateNumber() {
		var rows = noteTable.rows;
		for (var i = 1; i &lt; rows.length; i++) {
			rows[i].cells[0].innerText = i;
		}
	}
&lt;/script&gt;
</code></pre>
</body>
</html>