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

<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");
<p>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;<td>&quot; + (noteTable.rows.length - 1) + &quot;</td><td>&quot; + title + &quot;</td><td>&quot; + content + &quot;</td><td><button class='delete-btn'>删除</button></td>&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();
updateTableRows();
}
}
return false;
};</p>
<p>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();
updateTableRows();
}
}</p>
<p>function updateTableRows() {
var rows = noteTable.rows;
for (var i = 1; i &lt; rows.length; i++) {
rows[i].cells[0].innerHTML = i;
}
}
</script></p>
</body>
</html>