我用 HTML 制作了一个表格，并添加了一个删除按钮，以便它删除表格中最后记录的行。删除按钮有效，但当我刷新页面时，编辑内容消失了，一切都回到了原始状态。我怎样才能让它在用户编辑页面时永久改变？这是一个演示：http: //jsfiddle.net/objcLfxd/#&togetherjs=9ai74rb5DH如果那不起作用：body { background-color: #ffffff; font-family: candara, monospace; text-align: center; font-weight: bold; margin-top: 5px; text-transform: uppercase; height: 600px; width: 1000px; color: #1b1186;}#DELETE { background-color: #1b1186; width: 250px; color: white; margin-top: 50px;}#DELETE:hover { background-color: #ff4625; cursor: pointer;}button { background-color: #1b1186; border-radius: 0px; border: 0px #cccccc; font-family: candara, monospace; font-weight: bold; margin-top: 15px; color: #ffffff; text-align: center; font-size: 18px; padding: 10px; width: 200px; transition: all 1s; cursor: pointer; text-transform: uppercase; display: inline-block; text-decoration: none;}button:hover { background-color: #fff06d; color: black; padding-right: 25px; padding-left: 25px;}table { border: 5px, #1b1186}
4 回答
函数式编程
TA贡献1807条经验 获得超9个赞
首先，如果你想显示动态内容，你必须使用数据库，没有别的办法。其次，如果你想让你的内容实时变化，你必须使用 firebase、websocket 或任何其他技术
繁星coding
TA贡献1797条经验 获得超4个赞
在此示例中，我使用的是本地存储，并且我创建了一些函数以便您可以处理数据。
<html>
<head>
<button type="button" onclick="window.location.href='userhome.html';">Home</button>
<button type="button" onclick="window.location.href='settings.html';">Settings</button>
<button type="button" onclick="window.location.href='userhome.html';">Add Hours</button>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="HOURTABLE" contenteditable="true" class="display" style="width:100%">
<thead>
<tr>
<th>Session</th>
<th># Hours</th>
<th>Date</th>
<th>Organization</th>
<th>Description</th>
</tr>
</thead>
<tbody class="body-container">
</tbody>
<tfoot>
</tfoot>
<br>
<button ondblclick="deleteRowSelected()">Delete Row</button>
<script>
function getData() {
let local = localStorage.getItem('data');
if (local == null) {
local = setData();
}
return JSON.parse(local);
}
function setData(data = null) {
if (data == null) {
data =
[
{
session: 1,
hours: 4,
date: '4/5/2020',
organization: 'Tutoring',
description: 'It was fun'
},
{
session: 2,
hours: 67,
date: '4/8/2020',
organization: 'Tutoring',
description: 'It was interesting'
}
];
}
const textData = JSON.stringify(data);
localStorage.removeItem('data');
localStorage.setItem('data', textData);
return textData;
}
function generateRow(row) {
return `
<tr data-session="${row.session}">
<th>${row.session}</th>
<th>${row.hours}</th>
<th>${row.date}</th>
<th>${row.organization}</th>
<th>${row.description}</th>
</tr>`;
}
function deleteRow(session) {
const data = getData();
let newArray = [];
data.forEach(element => {
if (element.session !== session) {
newArray.push(element);
}
})
console.log(newArray);
setData(newArray);
load();
}
function load() {
const data = getData();
const container = $('.body-container');
container.html('');
if (container.length > 0) {
data.forEach(row => {
container.append(generateRow(row));
})
} else {
container.appent('<tr>empty</tr>');
}
}
var x = document.getElementById("HOURTABLE").rows.length;
function deleteRowSelected() {
const row = $('.body-container').find('tr.selected');
if (row.length == 0) {
alert('you must select a row');
} else {
row.remove();
deleteRow(row.data('session'));
}
}
$(document).ready(function () {
var table = $('#HOURTABLE').DataTable();
$('#HOURTABLE tbody').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
load();
});
</script>
</table>
</body>
</html>
守着一只汪
TA贡献1872条经验 获得超3个赞
以下示例假定您正在使用 PHP，并且delsessions.php在您的 Web 服务器上设置了一个名为 的 PHP 脚本。此脚本将通过 HTTP POST 接受 ID 数组。然后它将更新 SQL 数据库并从与传递给它的会话 ID 关联的表中删除行。
这还假设有脚本或 API 从同一个数据库表中提供表数据。
$(function() {
var table = $('#HOURTABLE').DataTable();
function href(el) {
window.location.href = $(el).data("href");
}
function delRows() {
var sessions = [];
$(".selected").each(function(i, el) {
sessions.push($(el).children().eq(0).text());
})
table.rows(".selected").remove().draw();
console.log("Delete Sessions", sessions);
$.post("delsessions.php", {
ids: sessions
});
}
$(".btn[data-href]").click(function(e) {
e.preventDefault();
href(this);
});
$(".delete-row").click(delRows);
$('#HOURTABLE tbody').on('click', 'tr', function() {
$(this).toggleClass("selected");
});
});
body {
background-color: #ffffff;
font-family: candara, monospace;
text-align: center;
font-weight: bold;
margin-top: 5px;
text-transform: uppercase;
height: 600px;
width: 1000px;
color: #1b1186;
}
#DELETE {
background-color: #1b1186;
width: 250px;
color: white;
margin-top: 50px;
}
#DELETE:hover {
background-color: #ff4625;
cursor: pointer;
}
button {
background-color: #1b1186;
border-radius: 0px;
border: 0px #cccccc;
font-family: candara, monospace;
font-weight: bold;
margin-top: 15px;
color: #ffffff;
text-align: center;
font-size: 18px;
padding: 10px;
width: 200px;
transition: all 1s;
cursor: pointer;
text-transform: uppercase;
display: inline-block;
text-decoration: none;
}
button:hover {
background-color: #fff06d;
color: black;
padding-right: 25px;
padding-left: 25px;
}
table {
border: 5px, #1b1186
}
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<button class="home btn" data-href="userhome.html">Home</button>
<button class="settings btn" data-href="settings.html">Settings</button>
<button class="add-hours btn" data-href="userhome.html">Add Hours</button>
<button class="delete-row btn">Delete Row</button>
<table id="HOURTABLE" contenteditable="true" class="display" style="width:100%">
<thead>
<tr>
<th>Session</th>
<th># Hours</th>
<th>Date</th>
<th>Organization</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>4</th>
<th>4/5/2020</th>
<th>Tutoring</th>
<th>It was fun</th>
</tr>
<tr>
<th>2</th>
<th>67</th>
<th>4/8/2020</th>
<th>Tutoring</th>
<th>It was interesting</th>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
当用户选择时，通过click各种行并单击“删除行”按钮，数据表将被更新，删除那些行，并且这些行的 ID 将发布到 PHP。然后脚本将从数据库中删除相关行。当用户返回站点或重新加载站点时，数据库表将不再包含这些行，并且在构建 HTML 表时也不会显示它们。
慕婉清6462132
TA贡献1804条经验 获得超2个赞
如果没有像 PHP、node.js、firebase 这样的后端，你就无法做到这一点……
您可以使用 localStorage 进行黑客攻击，但仅当用户不删除浏览器数据时，更改才会保留。
添加回答
举报
0/150
提交
取消