在此示例中，我使用的是本地存儲，并且我創建了一些函數以便您可以處理數據。
<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>
