我想将时间表数据保存为JSON，使用Ajax通信使用“保存”按钮保存时间表，并使用“加载”按钮加载保存的时间表，但是我不知道该怎么做。
可以通过为每个表提供索引值来查询索引，但是无法保存和加载该索引。
然后，在实现存储之后1. ajax通信2.语句的JSON数据3.表td每个语句
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Creating a School Timetable - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<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>
<h2>Creating a School Timetable</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"> </div>
<div>Click and drag a class to timetable.</div>
</div>
<div style="width:700px;">
<div class="left">
<table>
<tr>
<td><div class="item">Operating System Practice</div></td>
</tr>
<tr>
<td><div class="item">Web standards framework <br
/>programming</div></td>
</tr>
<tr>
<td><div class="item">Open Source Development</div></td>
</tr>
<tr>
<td><div class="item">Advanced mobile
<br />programming</div></td>
</tr>
<tr>
</tr>
</table>
</div>
<div class="right">
<table id = "tb">
<tr>
<td class="blank"></td>
<td class="title">Monday</td>
<td class="title">Tuesday</td>
<td class="title">Wednesday</td>
<td class="title">Thursday</td>
<td class="title">Friday</td>
</tr>
<tr>
<td class="time">08:00</td>
<td class="drop" id = "1st" data-index-number = "1"></td>
<td class="drop" id = "2nd" data-index-number = "2"></td>
<td class="drop" id = "3rd" data-index-number = "3"></td>
<td class="drop" id = "4th" data-index-number = "4"></td>
<td class="drop" id = "5th" data-index-number = "5"></td>
</tr>
<tr>
<td class="time">09:00</td>
<td class="drop" id = "6th" data-index-number = "6"></td>
<td class="drop" id = "7th" data-index-number = "7"></td>
<td class="drop" id = "8th" data-index-number = "8"></td>
<td class="drop" id = "9th" data-index-number = "9"></td>
<td class="drop" id = "10th" data-index-number = "10">
</td>
</tr>
<tr>
<td class="time">10:00</td>
<td class="drop" id = "11th" data-index-number = "11">
</td>
<td class="drop" id = "12th" data-index-number = "12">
</td>
<td class="drop" id = "13th" data-index-number = "13">
</td>
<td class="drop" id = "14th" data-index-number = "14">
</td>
<td class="drop" id = "15th" data-index-number = "15">
</td>
</tr>
<tr>
<td class="time">11:00</td>
<td class="drop" id = "16th" data-index-number = "16">
</td>
<td class="drop" id = "17th" data-index-number = "17">
</td>
<td class="drop" id = "18th" data-index-number = "18">
</td>
<td class="drop" id = "19th" data-index-number = "19">
</td>
<td class="drop" id = "20th" data-index-number = "20">
</td>
</tr>
<tr>
<td class="time">12:00</td>
<td class="drop" id = "21th" data-index-number = "21">
</td>
<td class="drop" id = "22th" data-index-number = "22">
</td>
<td class="drop" id = "23th" data-index-number = "23">
</td>
<td class="drop" id = "24th" data-index-number = "24">
</td>
<td class="drop" id = "25th" data-index-number = "25">
</td>
</tr>
<tr>
<td class="time">13:00</td>
<td class="lunch" colspan="5">Lunch</td>
</tr>
<tr>
<td class="time">14:00</td>
<td class="drop" id = "26th" data-index-number = "26">
</td>
<td class="drop" id = "27th" data-index-number = "27">
</td>
<td class="drop" id = "28th" data-index-number = "28">
</td>
<td class="drop" id = "29th" data-index-number = "29">
</td>
<td class="drop" id = "30th" data-index-number = "30">
</td>
</tr>
<tr>
<td class="time">15:00</td>
<td class="drop" id = "31th" data-index-number = "31">
</td>
<td class="drop" id = "32th" data-index-number = "32">
</td>
<td class="drop" id = "33th" data-index-number = "33">
</td>
<td class="drop" id = "34th" data-index-number = "34">
</td>
<td class="drop" id = "35th" data-index-number = "35">
</td>
</tr>
<tr>
<td class="time">16:00</td>
<td class="drop" id = "36th" data-index-number = "36">
</td>
<td class="drop" id = "37th" data-index-number = "37">
</td>
<td class="drop" id = "38th" data-index-number = "38">
</td>
<td class="drop" id = "39th" data-index-number = "39">
</td>
<td class="drop" id = "40th" data-index-number = "40">
</td>
</tr>
</table>
<br />
<ul>
<button id="save">Save</button>
<button id="load">load</button>
<div id="msg"></div>
</ul>
</div>
</div>
<style type="text/css">
.left{
width:120px;
float:left;
}
.left table{
background:#E0ECFF;
}
.left td{
background:#eee;
}
.right{
float:right;
width:570px;
}
.right table{
background:#E0ECFF;
width:100%;
}
.right td{
background:#fafafa;
color:#444;
text-align:center;
padding:2px;
}
.right td{
background:#E0ECFF;
}
.right td.drop{
background:#fafafa;
width:100px;
}
.right td.over{
background:#FBEC88;
}
.item{
text-align:center;
border:1px solid #499B33;
background:#fafafa;
color:#444;
width:100px;
}
.assigned{
border:1px solid #BC2A4D;
}
.trash{
background-color:red;
}
</style>
<script>
$(function(){
$('.left .item').draggable({
revert:true,
proxy:'clone'
});
$('.right td.drop').droppable({
accept: '.item',
onDragEnter:function(){
$(this).addClass('over');
},
onDragLeave:function(){
$(this).removeClass('over');
},
onDrop:function(e,source){
$(this).removeClass('over');
$(this).data("indexNumber"); // Index Number Lookup
if ($(source).hasClass('assigned')){
$(this).append(source);
} else {
var c = $(source).clone().addClass('assigned');
$(this).empty().append(c);
c.draggable({
revert:true
});
}
}
});
$('.left').droppable({
accept:'.assigned',
onDragEnter:function(e,source){
$(source).addClass('trash');
},
onDragLeave:function(e,source){
$(source).removeClass('trash');
},
onDrop:function(e,source){
$(source).remove();
}
});
});
</script>
</body>
</html>
时间表拖放和索引号查找正常