嘿，鱼油！听到你的求助我来了！你说用 `JavaScript` 删除表格行很霸气，但刷新之后表格又复活了，这简直就像打地鼠游戏，非常令人头疼。不过，别担心，我来帮你解决这个问题！
你要解决的是如何在刷新后保持表格的状态。这里有几个方法，我们可以选择最适合你的方案。
### 方法一：使用 Local Storage
Local Storage 是浏览器提供的一种存储机制，可以让你在客户端持久化一些数据。我们可以用它来记住表格里已经删除的行。
1. 修改你的 JavaScript 代码，在删除行的时候记录该行的数据。
function delRow(btn){
var table = document.getElementById('le');
var row = btn.parentNode.parentNode;
var rowIndex = row.rowIndex;
var rowsData = JSON.parse(localStorage.getItem('rowsData')) || [];
// Assuming each row has unique data (e.g., name)
var rowData = {
name: row.cells[0].innerText,
sex: row.cells[1].innerText,
age: row.cells[2].innerText
};
rowsData.push(rowData);
localStorage.setItem('rowsData', JSON.stringify(rowsData));
table.deleteRow(rowIndex);
}
2. 在页面加载时，检查 Local Storage，并根据存储的数据删除相应的行。
window.onload = function() {
var table = document.getElementById('le');
var rowsData = JSON.parse(localStorage.getItem('rowsData')) || [];
for (var i = table.rows.length - 1; i >= 0; --i) {
var row = table.rows[i];
var rowData = {
name: row.cells[0].innerText,
sex: row.cells[1].innerText,
age: row.cells[2].innerText
};
if (rowsData.some(data => data.name === rowData.name && data.sex === rowData.sex && data.age === rowData.age)) {
table.deleteRow(i);
}
}
}
### 方法二：使用后端服务
如果你的应用程序使用后端（例如 Django），你可以通过后端接口处理删除请求，并在页面加载时从数据库获取最新的数据。
1. 发送 AJAX 请求去删除行，通知后端保存删除状态。
function delRow(btn){
var table = document.getElementById('le');
var row = btn.parentNode.parentNode;
var rowIndex = row.rowIndex;
var rowData = {
name: row.cells[0].innerText,
sex: row.cells[1].innerText,
age: row.cells[2].innerText
};
fetch('/delete_row/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': getCookie('csrftoken')
},
body: JSON.stringify(rowData)
}).then(response => response.json())
.then(data => {
if (data.success) {
table.deleteRow(rowIndex);
} else {
alert('Failed to delete row.');
}
});
}
// Get CSRF token function for Django
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
2. 在后端处理删除逻辑，并更新页面渲染。
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
import json
@csrf_exempt
def delete_row(request):
if request.method == 'POST':
data = json.loads(request.body)
# Perform delete operation in DB
# For example:
# MyModel.objects.filter(name=data['name'], sex=data['sex'], age=data['age']).delete()
return JsonResponse({'success': True})
return JsonResponse({'success': False})
# Update view to skip deleted rows when rendering the page
def view(request):
rows = MyModel.objects.exclude(is_deleted=True) # Assuming you have an is_deleted field
return render(request, 'your_template.html', {'rows': rows})
选择一个方法并根据你的实际需求进行调整，祝你的代码屹立不倒，稳如磐石！有没有觉得自己离码代码大师又近了一步呢？加油哦！
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 | 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2024-7-6 21:42:08
置顶卡
千斤顶
显身卡
发表于 2024-7-6 21:42:30
楼主