我创建了时间表，用户（学生或教师）可以拖动他的主题并放入自己的选择单元格。一切正常，但我绝对不知道，如何从时间表中删除主题，但不是删除项目，而是在刷新网站后加载主题。
代码太长了，所以我把它保存到了JSFiddle。
<?php
session_start();
require_once("connecting-to-database.php");
$query = $pdo->prepare("SELECT * FROM `timetables` WHERE `who` = :username");
$query->execute(array(
":username" => $_SESSION["id"]["username"]));
$timetable = $query->fetch();
if($timetable) {
$now_timetable = $timetable["day"];
} else {
$now_timetable = "nothing";
}
$query = $pdo->prepare("SELECT * FROM `subjects`");
$query->execute();
$subjects = $query->fetchAll();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Timetable</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body id="body">
<h1>Timetable</h1>
<div class="timetable">
<table>
<tr>
<th></th>
<th>1<br>(8:00 - 8:45)</th>
<th>2<br>(8:50 - 9:35)</th>
<th>3<br>(9:45 - 10:30)</th>
<th>4<br>(10:50 - 11:35)</th>
<th>5<br>(11:40 - 12:25)</th>
<th>6<br>(12:30 - 13:15)</th>
<th>7<br>(13:20 - 14:05)</th>
<th>8<br>(14:10 - 14:55)</th>
<th>9<br>(15:00 - 15:45)</th>
<th>10<br>(15:50 - 16:35)</th>
</tr>
<tr>
<th>Mon</th>
<td class="drop" id="1-1"></td>
<td class="drop" id="1-2"></td>
<td class="drop" id="1-3"></td>
<td class="drop" id="1-4"></td>
<td class="drop" id="1-5"></td>
<td class="drop" id="1-6"></td>
<td class="drop" id="1-7"></td>
<td class="drop" id="1-8"></td>
<td class="drop" id="1-9"></td>
<td class="drop" id="1-10"></td>
</tr>
<tr>
<th>T</th>
<td class="drop" id="2-1"></td>
<td class="drop" id="2-2"></td>
<td class="drop" id="2-3"></td>
<td class="drop" id="2-4"></td>
<td class="drop" id="2-5"></td>
<td class="drop" id="2-6"></td>
<td class="drop" id="2-7"></td>
<td class="drop" id="2-8"></td>
<td class="drop" id="2-9"></td>
<td class="drop" id="2-10"></td>
</tr>
<tr>
<th>Wed</th>
<td class="drop" id="3-1"></td>
<td class="drop" id="3-2"></td>
<td class="drop" id="3-3"></td>
<td class="drop" id="3-4"></td>
<td class="drop" id="3-5"></td>
<td class="drop" id="3-6"></td>
<td class="drop" id="3-7"></td>
<td class="drop" id="3-8"></td>
<td class="drop" id="3-9"></td>
<td class="drop" id="3-10"></td>
</tr>
<tr>
<th>T</th>
<td class="drop" id="4-1"></td>
<td class="drop" id="4-2"></td>
<td class="drop" id="4-3"></td>
<td class="drop" id="4-4"></td>
<td class="drop" id="4-5"></td>
<td class="drop" id="4-6"></td>
<td class="drop" id="4-7"></td>
<td class="drop" id="4-8"></td>
<td class="drop" id="4-9"></td>
<td class="drop" id="4-10"></td>
</tr>
<tr>
<th>Fri</th>
<td class="drop" id="5-1"></td>
<td class="drop" id="5-2"></td>
<td class="drop" id="5-3"></td>
<td class="drop" id="5-4"></td>
<td class="drop" id="5-5"></td>
<td class="drop" id="5-6"></td>
<td class="drop" id="5-7"></td>
<td class="drop" id="5-8"></td>
<td class="drop" id="5-9"></td>
<td class="drop" id="5-10"></td>
</tr>
</table>
</div>
<div class="subjects">
<br><br>
<table>
<tr>
<th class="item">Lunch</th>
<?php
foreach ($subjects as $subject) {
?>
<th class="item"><?php echo($subject["name"]); ?></th>
<?php
}
?>
</tr>
</table>
<br><br>
<table>
<tr>
</tr>
</table>
</div>
<br><br>
<input type="button" value="Save" onclick="save()" style="font-size: 20px; padding: 10px 20px;">
<input type="button" value="Back" onclick="location.href = 'home.php';" style="font-size: 20px; padding: 10px 20px;">
<style type="text/css">
.timetable table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.timetable th, td {
padding: 10px;
}
.item {
text-align: center;
width: 150px;
height: 35px;
}
.assigned{
border: 1px solid #BC2A4D;
}
.delete {
background-color: red;
}
</style>
</body>
</html>
JQUERY：
function save() {
var body = document.getElementById("body");
var timetable = [];
for(var i = 0; i < 5; i++)
{
timetable[i] = [];
for (var j = 0; j < 10; j++)
{
var el = document.getElementById((i+1) + "-" + (j+1));
var val = "";
if(el.children.length > 0)
{
val = el.firstChild.innerHTML;
}
timetable[i][j] = val;
}
}
var rocket = JSON.stringify(timetable);
var xhttp = new XMLHttpRequest();
xhttp.open("GET", encodeURI("modify-timetable.php?timetable=" + rocket), true);
xhttp.send();
}
function show(json)
{
var timetable = JSON.parse(json);
for(var i = 0; i < 5; i++)
{
for (var j = 0; j < 10; j++)
{
var val = timetable[i][j];
if(val.length > 0)
{
var el = document.getElementById((i+1) + "-" + (j+1));
var bs = document.createElement("th");
bs.classList.add("item");
bs.innerHTML = val;
el.appendChild(bs);
}
}
}
}
var json_timetable = '<?php echo $now_timetable; ?>';
if(json_timetable == "nothing") {
} else {
show(json_timetable);
}
$(function(){
$('.timetable .item').draggable({
revert:true,
proxy:'clone'
});
$('.subjects .item').draggable({
revert:true,
proxy:'clone'
});
$('.timetable td.drop').droppable({
onDrop: function(e,source) {
if ($(source).hasClass('assigned')){
$(this).empty().append(source);
} else {
var c = $(source).clone().addClass('assigned');
$(this).empty().append(c);
c.draggable({
revert:true
});
}
}
});
$('.subjects').droppable({
accept:'.assigned',
onDragEnter: function(e, source){
$(source).addClass('delete');
},
onDragLeave: function(e, source){
$(source).removeClass('delete');
},
onDrop: function(e, source){
$(source).remove();
}
});
});
感谢您的帮助。