效果图：
完整代码：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【前端实例代码】使用JavaScript和CSS&Html完成列表的增删查改CRUD操作</title>
<style>
body {
width: 100%;
height: 100vh;
overflow: hidden;
background: linear-gradient(135deg, #4AB1FF, #2D5CFE);
}
table {
width: 80%;
margin: 40px auto;
background: #fff;
border-radius: 7px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
table.list {
text-align: center;
width: 100%;
}
td {
border: 1px solid rgb(204, 200, 200);
text-align: left;
padding: 8px 15px;
}
tr:nth-child(even), table.list thread > tr {
background-color: rgb(204, 200, 200);
}
input[type="text"], input[type="number"] {
width: 91%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid rgb(165, 161, 161);
border-radius: 4px;
}
input[type="submit"], input[type="reset"] {
background: #eee;
padding: 6px 12px;
margin: 15px 0 10px;
display: inline-block;
border: none;
border-radius: 30px;
font-size: 1rem;
cursor: pointer;
outline: none;
}
input[type="submit"]:hover {
background: #4b99d8;
}
input[type="reset"]:hover {
background: #4b99d8;
}
button {
background: #eee;
padding: 6px 12px;
margin: 15px 0 10px;
display: inline-block;
border: none;
border-radius: 30px;
font-size: 1rem;
cursor: pointer;
outline: none;
}
button:hover {
background: #4b99d8;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<form autocomplete="off" onsubmit="onFormSubmit()">
<div>
<label for="productCode">产品代码</label>
<input type="text" name="productCode" id="productCode">
</div>
<div>
<label for="product">产品名称</label>
<input type="text" name="product" id="product">
</div>
<div>
<label for="qty">产品数量</label>
<input type="number" name="qty" id="qty">
</div>
<div>
<label for="perPrice">产品价格</label>
<input type="number" name="perPrice" id="perPrice">
</div>
<div class="form_action--button">
<input type="submit" value="提交">
<input type="reset" value="重置">
</div>
</form>
<td>
<table class="list" id="storeList">
<thead>
<tr>
<th>产品代码</th>
<th>产品名称</th>
<th>产品数量</th>
<th>产品价格</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</td>
</td>
</tr>
</table>
<script>
var selectedRow = null
function onFormSubmit(e) {
event.preventDefault();
var formData = readFormData();
if (selectedRow == null) {
insertNewRecord(formData);
} else {
updateRecord(formData);
}
resetForm();
}
//Retrieve the data
function readFormData() {
var formData = {};
formData["productCode"] = document.getElementById("productCode").value;
formData["product"] = document.getElementById("product").value;
formData["qty"] = document.getElementById("qty").value;
formData["perPrice"] = document.getElementById("perPrice").value;
return formData;
}
//Insert the data
function insertNewRecord(data) {
var table = document.getElementById("storeList").getElementsByTagName('tbody')[0];
var newRow = table.insertRow(table.length);
cell1 = newRow.insertCell(0);
cell1.innerHTML = data.productCode;
cell2 = newRow.insertCell(1);
cell2.innerHTML = data.product;
cell3 = newRow.insertCell(2);
cell3.innerHTML = data.qty;
cell4 = newRow.insertCell(3);
cell4.innerHTML = data.perPrice;
cell4 = newRow.insertCell(4);
cell4.innerHTML = `<button onClick="onEdit(this)">Edit</button> <button onClick="onDelete(this)">Delete</button>`;
}
//Edit the data
function onEdit(td) {
selectedRow = td.parentElement.parentElement;
document.getElementById("productCode").value = selectedRow.cells[0].innerHTML;
document.getElementById("product").value = selectedRow.cells[1].innerHTML;
document.getElementById("qty").value = selectedRow.cells[2].innerHTML;
document.getElementById("perPrice").value = selectedRow.cells[3].innerHTML;
}
function updateRecord(formData) {
selectedRow.cells[0].innerHTML = formData.productCode;
selectedRow.cells[1].innerHTML = formData.product;
selectedRow.cells[2].innerHTML = formData.qty;
selectedRow.cells[3].innerHTML = formData.perPrice;
}
//Delete the data
function onDelete(td) {
if (confirm('Do you want to delete this record?')) {
row = td.parentElement.parentElement;
document.getElementById('storeList').deleteRow(row.rowIndex);
resetForm();
}
}
//Reset the data
function resetForm() {
document.getElementById("productCode").value = '';
document.getElementById("product").value = '';
document.getElementById("qty").value = '';
document.getElementById("perPrice").value = '';
selectedRow = null;
}
</script>
</body>
</html>涉及到的知识点：
1、HTML DOM getElementById() 方法
定义和用法
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。
如果没有指定 ID 的元素返回 null
如果存在多个指定 ID 的元素则返回第一个。
如果需要查找到那些没有 ID 的元素，你可以考虑通过CSS选择器使用 querySelector()。
语法
document.getElementById(elementID)
参数
| 参数 | 类型 | 描述 |
|---|---|---|
| elementID | String | 必须。元素ID属性值。 |
返回值
| 类型 | 描述 |
|---|---|
| 元素对象 | 指定ID的元素 |
资料：
https://www.runoob.com/jsref/met-document-getelementbyid.html2、HTML DOM innerHTML 属性
定义和用法
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
语法
HTMLElementObject.innerHTML=text
资料：