使用节点和jQuery从Json中删除表行的过程如下:
<!DOCTYPE html>
<html>
<head>
<title>Delete Table Row</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john@example.com</td>
<td><button class="deleteRow" data-row="1">Delete</button></td>
</tr>
<tr>
<td>Jane Smith</td>
<td>jane@example.com</td>
<td><button class="deleteRow" data-row="2">Delete</button></td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('.deleteRow').click(function() {
var rowId = $(this).data('row');
deleteTableRow(rowId);
});
});
function deleteTableRow(rowId) {
// 发送请求到服务器端,删除对应的Json数据
// 这里假设你已经有一个包含Json数据的文件,例如data.json
// 你可以使用Node.js的fs模块读取和写入Json文件
// 这里只是一个简单的示例,实际应用中可能需要更复杂的逻辑
var fs = require('fs');
var jsonData = JSON.parse(fs.readFileSync('data.json', 'utf8'));
delete jsonData[rowId];
fs.writeFileSync('data.json', JSON.stringify(jsonData));
// 从表格中删除对应的行
$('#myTable tbody tr[data-row="' + rowId + '"]').remove();
}
</script>
</body>
</html>
// server.js
const http = require('http');
const fs = require('fs');
const server = http.createServer((req, res) => {
if (req.url === '/deleteRow' && req.method === 'POST') {
let body = '';
req.on('data', (chunk) => {
body += chunk;
});
req.on('end', () => {
const rowId = JSON.parse(body).rowId;
const jsonData = JSON.parse(fs.readFileSync('data.json', 'utf8'));
delete jsonData[rowId];
fs.writeFileSync('data.json', JSON.stringify(jsonData));
res.end();
});
} else {
res.statusCode = 404;
res.end();
}
});
server.listen(3000, () => {
console.log('Server is running on port 3000');
});
{
"1": {
"name": "John Doe",
"email": "john@example.com"
},
"2": {
"name": "Jane Smith",
"email": "jane@example.com"
}
}
node server.js
请注意,这只是一个简单的示例,实际应用中可能需要更复杂的逻辑和安全性措施。此外,你还可以使用其他技术和工具来实现相同的功能,这只是其中一种方法。
推荐的腾讯云相关产品:腾讯云服务器(CVM)、腾讯云对象存储(COS)、腾讯云云函数(SCF)。
领取专属 10元无门槛券
手把手带您无忧上云