今天一个同学在QQ里问,如何实现前端数据表中有合并项的效果,
在QQ里打字说不清楚,于是写了一个简单的例子说明问题,
现在记录下来,以备后用:
先写一个基本的html页面:
<!DOCTYPE html /> <html> <head> <title>test table</title> <script src="./js/jquery-3.1.1.min.js"></script> </head> <body> <table id="testTable" border="1" cellspacing="1" cellpadding="1"> <thead> <tr> <th>车站名称</th> <th>列车类型</th> <th>列车名称</th> <th>到站时间</th> <th>出站时间</th> <th>停靠时长</th> </tr> </thead> <tbody> </tbody> </table> </body> </html> <script type="text/javascript"> </script>
接着造数据:
<script type="text/javascript"> var dt = [ { siteName: '武昌站', type: '快速', trainCode: 'K82', enterTime: '6:02', leaveTime: '6:08', duration: 6 }, { siteName: '武汉站', type: '动车', trainCode: 'D289', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, { siteName: '汉口站', type: '动车', trainCode: 'D158', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, { siteName: '武汉站', type: '高铁', trainCode: 'G129', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, { siteName: '武汉站', type: '高铁', trainCode: 'G68', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, { siteName: '武昌站', type: '动车', trainCode: 'D5242', enterTime: '9:02', leaveTime: '9:10', duration: 8 }, { siteName: '武昌站', type: '直达', trainCode: 'Z168', enterTime: '10:52', leaveTime: '10:57', duration: 5 }, { siteName: '汉口站', type: '动车', trainCode: 'D86', enterTime: '8:00', leaveTime: '8:05', duration: 5 }, { siteName: '汉口站', type: '直达', trainCode: 'Z35', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, { siteName: '武昌站', type: '特快', trainCode: 'T254', enterTime: '6:55', leaveTime: '7:02', duration: 7 }, { siteName: '汉口站', type: '快速', trainCode: 'K91', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, { siteName: '武汉站', type: '动车', trainCode: 'D5146', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, { siteName: '武汉站', type: '高铁', trainCode: 'G362', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, { siteName: '汉口站', type: '直达', trainCode: 'Z38', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, { siteName: '汉口站', type: '特快', trainCode: 'T232', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, { siteName: '武汉站', type: '高铁', trainCode: 'G69', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, { siteName: '武昌站', type: '直达', trainCode: 'Z25', enterTime: '21:56', leaveTime: '22:08', duration: 12 }, { siteName: '武汉站', type: '动车', trainCode: 'D91', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, ]; </script>
然后排序数据, 这里省略排序过程,麻烦,直接贴排序结果,能表明做法就行:
<script type="text/javascript"> var list = [ { siteName: '武昌站', type: '快速', trainCode: 'K82', enterTime: '6:02', leaveTime: '6:08', duration: 6 }, { siteName: '武昌站', type: '特快', trainCode: 'T254', enterTime: '6:55', leaveTime: '7:02', duration: 7 }, { siteName: '武昌站', type: '直达', trainCode: 'Z168', enterTime: '10:52', leaveTime: '10:57', duration: 5 }, { siteName: '武昌站', type: '直达', trainCode: 'Z25', enterTime: '21:56', leaveTime: '22:08', duration: 12 }, { siteName: '武昌站', type: '动车', trainCode: 'D5242', enterTime: '9:02', leaveTime: '9:10', duration: 8 }, { siteName: '汉口站', type: '快速', trainCode: 'K91', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, { siteName: '汉口站', type: '特快', trainCode: 'T232', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, { siteName: '汉口站', type: '动车', trainCode: 'D158', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, { siteName: '汉口站', type: '动车', trainCode: 'D86', enterTime: '8:00', leaveTime: '8:05', duration: 5 }, { siteName: '汉口站', type: '直达', trainCode: 'Z35', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, { siteName: '汉口站', type: '直达', trainCode: 'Z38', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, { siteName: '武汉站', type: '动车', trainCode: 'D91', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, { siteName: '武汉站', type: '动车', trainCode: 'D289', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, { siteName: '武汉站', type: '动车', trainCode: 'D5146', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, { siteName: '武汉站', type: '高铁', trainCode: 'G362', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, { siteName: '武汉站', type: '高铁', trainCode: 'G69', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, { siteName: '武汉站', type: '高铁', trainCode: 'G129', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, { siteName: '武汉站', type: '高铁', trainCode: 'G68', enterTime: '8:24', leaveTime: '8:32', duration: 8 }, ];//排序后的数据 </script>
然后就是加载数据的算法:
<script type="text/javascript"> /* * 倒序循环,一次取当前条和下一条,进行比较, * 根据比较结果累加合并的行数或重置合并的行数,生成的标签依次往前累加 */ var sn = 1, tp = 1, ht = ''; for (var i = list.length - 1; i > 0; i--) { var d = list[i], p = list[i - 1]; ht = '<tr>' + (d.siteName == p.siteName ? '' : ('<td rowspan="' + sn + '">' + d.siteName + '</td>')) + (d.siteName == p.siteName && d.type == p.type ? '' : ('<td rowspan="' + tp + '"' + '>' + d.type + '</td>')) + '<td>' + d.trainCode + '</td><td>' + d.enterTime + '</td><td>' + d.leaveTime + '</td><td>' + d.duration + '</td></tr>' + ht; if (d.siteName == p.siteName) { sn += 1; tp = d.type == p.type ? (tp + 1) : 1; } else { sn = 1; tp = 1; } } // 由于循环没有到第一条,所以必须单独补上第一条 var d = list[0]; ht = '<tr><td rowspan="' + sn + '">' + d.siteName + '</td>' + '<td rowspan="' + tp + '"' + '>' + d.type + '</td>' + '<td>' + d.trainCode + '</td><td>' + d.enterTime + '</td><td>' + d.leaveTime + '</td><td>' + d.duration + '</td></tr>' + ht; $('#testTable').html(ht); </script>
最后运行效果: