我参考的原型是自己学校的课程表，结构大致如下：
从数据库获取到的字段为星期序号（1-7）和节序号（1-12），也代表了处于表格的列序号和行序号。
一开始我也在思索应该如何将课程条目转化为这样一个二维表格。 显然html的布局不允许定义二维矩阵，不然我们直接根据列和行插入就好了。
html的表格由 < table> 标签来定义。每个表格均有若干行（由 < tr> 标签定义），每行被分割为若干单元格（由 < td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
这里我想出了一种方法，反正能实现就好了。 先初始化表格使其全部填满，单元格是一节课，所以表格显示课程的部分被划分为7*12的表，然后根据其所在的行列数，赋予每个单元格一个id，id计算方法为：（列数-1）*12+行数，也就是按一列一列来计数的意思。
同样的我们可以根据课程属性（Cday和Cindex）来计算它对应的id，由于课程节数基本>1，所以重要的事情就是如何合并单元格，呈现出上图的效果？
由数据库字段格式可知，Cindex是用“，”分割的字符串，我们将其分割为字符串数组arr，取数组的第一个值，和Cday联合计算出作为课程单元格th的id属性，然后再根据arr的长度len，来设置该单元格th的rowspan（所占的行数），再将其id序号之后的rowspan-1个单位格remove掉（id+1至id+rowspan-1）。这样就大功告成了。
<table class="table table-hover" id="courseTable"> <caption>本学期课表</caption> <tr> <th>星期</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th> <th>星期日</th> </tr> </table> <script type="text/javascript"> $(function() { initTable(); initData(); }); function initTable(){ //12行 for(var i=1;i<13;i++){ var table=$("#courseTable"); var tr=$('<tr></tr>'); /// var tr = $('<tr></tr>'); for(var j=0;j<8;j++){ if(j==0){ tr.append('<td>'+'第'+(i)+'节'+'</td>'); } else //添加id=（列数-1）*12+行数 tr.append('<td id='+((j-1)*12+i)+'></td>'); } table.append(tr); } } //加载初始化数据 function initData() { $.ajax({ type : 'post', dataType : "json", url : "CourseSelJson", success : function(data) { console.log(data); var obj = eval(data); console.log(obj); //不知爲何變成了繁體 //遍歷課程對象 $(obj).each(function(index) { var course = obj[index]; var arr=course.cindex.split(","); var rowspan=arr.length; var index_id= (parseInt(course.cday)-1)*12+parseInt(arr[0]); var th=$("#"+index_id); th.attr("rowspan",rowspan); th.html(course.cname+'</br>'+course.ctime+'</br>' +course.tname+'</br>'+course.clocation); for(var i=1;i<rowspan;i++){ $("#"+(index_id+i)).remove(); } console.log(rowspan); console.log(index_id); }); }, error : function() { alert("发生错误"); } }); } </script>