如何使HTML网站具有交互性，以便当用户单击删除按钮时，它会对所有用户进行更改，即使在重新加载时也是如此

我用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
}

<!DOCTYPE html>
<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>
<script>
$(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');
}
});
});

</script>
</head>
<body onload="checkEdits()">
<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>
<br>
<button ondblclick="row()"> 
Delete Row 
</button> 
<script> 
var x = document.getElementById("HOURTABLE").rows.length;

function row() { 

// delete row (index-0). 
document.getElementById("HOURTABLE").deleteRow(1);

}
</script>
</table>
</body>
</html>

首先，若要显示动态内容，必须使用数据库，并没有其他方法。其次，如果你想实时更改你的内容，你必须使用firebase、websocket或任何其他技术

在这个例子中，我使用的是localstorage，并且我创建了一些函数，以便您可以处理数据。

<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>

以下示例假设您正在使用PHP，并且在Web服务器上设置了一个名为delsessions.php的PHP脚本。此脚本将通过HTTPPOST接受一个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选择各种行并点击"行"时；删除行"；按钮，Datatable将被更新，删除这些行，并且这些行的ID将被发布到PHP。然后，脚本将从数据库中删除相对行。当用户返回网站或重新加载网站时，数据库表将不再包含行，并且在构建HTML表时不会显示这些行。

如果没有像PHP、node.js、firebase这样的后端，就无法做到这一点。。。

您可以使用localStorage进行破解，但只有当用户不删除浏览器数据时，更改才会保留。

相关内容

最新更新

热门标签：