jquery+html实现增删改查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="images/logo.ico"rel="icon" type="image/logo-icon">
<title>产品介绍</title>
<style type="text/css">
@import url("qiye.css");
@import url("product.css");
</style>
<style type="text/css">
</style>
<script src="jquery-3.7.1.min.js"></script>
<script src="product.js"></script>
</head>
<body>
<div class="flex-container1">
<div class="box1">
<input type="text"placeholder="请输入搜索内容">
<button type="submit">搜索</button>
</div>
</div>
<div>
<ul type="none">
<li><a href="index.html"target="_blank"title="首页">首页</a></li>
<li><a href="company_introduction.html"target="_blank"title="公司简介">公司简介</a></li>
<li><a href="news_dynamic.html"target="_blank"title="新闻资讯">新闻资讯</a></li>
<li><a href="product_introduction.html"target="_blank"title="产品介绍">产品介绍</a></li>
<li><a href="employee_anti_counterfeiting.html"target="_blank"title="员工防伪">员工防伪</a></li>
<li><a href="supply_chain.html"target="_blank"title="供应链">供应链</a></li>
<li><a href="zhongxiaoer.html"target="_blank"title="众小二">众小二</a></li>
<li><a href="message_boards.html"target="_blank"title="留言板">留言板</a></li>
<li><a href="join_us.html"target="_blank"title="加入我们">加入我们</a></li>
</ul>
</div>
<h1>小样臻选</h1>
<h2 align="center">添加新产品</h2>
<form id="addForm">
<input type="text" id="nameInput" placeholder="产品名称" required>
<input type="text" id="descriptionInput" placeholder="产品介绍" required>
<input type="number" id="priceInput" placeholder="产品价格" required>
<button type="submit"class="submit1">添加</button>
</form>
<br><br>
<table id="productTable"border="1px"cellspacing="0"align="center">
<thead>
<tr>
<th>ID</th>
<th>产品名称</th>
<th>产品描述</th>
<th>产品价格</th>
<th class="th">操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
$(document).ready(function () {
// 添加数据
var products = [
{ id: 1, name: '抽纸', description: '80抽4层抽取式面巾纸 柔软纸巾 加厚 加大 大整箱发货', price: 39.9 },
{ id: 2, name: '厚汁肉酱米线', description: '整箱发货 6包装', price: 59.9 }
];
function displayProducts(products) {
var tableBody = $('#productTable tbody');
tableBody.empty();
//遍历
for (var i = 0; i < products.length; i++) {
var product = products[i];
var row = `
<tr>
<td>${product.id}</td>
<td>${product.name}</td>
<td>${product.description}</td>
<td>${product.price}</td>
<td><button class="editButton" data-id="${product.id}">修改</button> <button class="deleteButton" data-id="${product.id}">删除</button></td>
</tr>
`;
//追加到表中
tableBody.append(row);
}
}
displayProducts(products);
//添加产品信息
$('#addForm').on('submit', function (e) {
e.preventDefault();
//获取添加的表格
var name = $('#nameInput').val();
var description = $('#descriptionInput').val();
var price = parseFloat($('#priceInput').val());
//判断价格是否为数字
if (!isNaN(price)) {
var newProduct = { id: products.length + 1, name, description, price };
products.push(newProduct);
displayProducts(products);
clearForm('#addForm');
} else {
alert('请输入有效价格.');
}
});
//为修改按钮提供响应
$(document).on('click', '.editButton', function () {
var productId = parseInt($(this).data('id'));
var editedProduct = prompt('产品ID', `${productId}, '产品名称' ${products[productId - 1].name}, '产品介绍'${products[productId - 1].description}, '产品价格' ${products[productId - 1].price}`);
if (editedProduct) {
var fields = editedProduct.split(',');
var index = products.findIndex(p => p.id === productId);
products[index] = { id: productId, name: fields[1], description: fields[2], price: parseFloat(fields[3]) };
displayProducts(products);
}
});
//为删除按钮提供响应
$(document).on('click', '.deleteButton', function () {
var productId = parseInt($(this).data('id'));
var confirmation = confirm(`你确定要删除ID为 ${productId}?的产品吗`);
if (confirmation) {
var index = products.findIndex(p => p.id === productId);
products.splice(index, 1);
displayProducts(products);
}
});
});
function clearForm(formId) {
$(formId + ' input').val('');
}
</script>
<div class="box7">
<p>邮政编码：230088</p>
<p>企业邮箱：servic@sanzhiyang.cn</p>
<p>廉政邮箱:supplier@sanzhiyan.cn</p>
<p>公司地址：安徽合肥市蜀山区磨子潭路1366号</p>
<br>
</div>
</body>
</html>
