87,907
社区成员
发帖
与我相关
我的任务
分享
<div id="div_timegantt" class="div_timegantt">
<table cellpadding="0" cellspacing="0">
<tr class="thead">
<th colspan="6"> 00:00 </th>
<th colspan="6"> 01:00 </th>
<th colspan="6"> 02:00 </th>
<th colspan="6"> 03:00 </th>
<th colspan="6"> 04:00 </th>
<th colspan="6"> 05:00 </th>
<th colspan="6"> 06:00 </th>
<th colspan="6"> 07:00 </th>
<th colspan="6"> 08:00 </th>
<th colspan="6"> 09:00 </th>
<th colspan="6"> 10:00 </th>
</tr>
<!-- 1Row -->
<tr class="tbody">
<!-- 00:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 01:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 02:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 03:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 04:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 05:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 06:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 07:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 08:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 09:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 10:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<style>
.div_timegantt{overflow:auto;overflow-x:hidden;width:300px;}
</style>
<div id="div_timegantt" class="div_timegantt">
<table cellpadding="0" cellspacing="0">
<tr class="thead">
<th colspan="6"> 00:00 </th>
<th colspan="6"> 01:00 </th>
<th colspan="6"> 02:00 </th>
<th colspan="6"> 03:00 </th>
<th colspan="6"> 04:00 </th>
<th colspan="6"> 05:00 </th>
<th colspan="6"> 06:00 </th>
<th colspan="6"> 07:00 </th>
<th colspan="6"> 08:00 </th>
<th colspan="6"> 09:00 </th>
<th colspan="6"> 10:00 </th>
</tr>
<!-- 1Row -->
<tr class="tbody">
<!-- 00:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 01:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 02:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 03:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 04:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 05:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 06:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 07:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 08:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 09:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<!-- 10:00 -->
<td class="nonepast10"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<a id='scLeft' href='#'>左移</a> <a id='scRight' href='#'>右移</a>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var nowTH = 0, dv = $('#div_timegantt'), ths = dv.find('th'), thNum = ths.size(), maxScrollLeft = ths.parent().width() - dv.width()
, startTH = '05:00';
$('#scLeft,#scRight').click(function () {
if (arguments.length < 2) nowTH += this.id == 'scLeft' ? -1 : 1;
if (nowTH < 0) { nowTH = 0; return false }
var scrollLeft = 0;
ths.each(function (i, el) { if (i >= nowTH) return false; scrollLeft += ths.eq(i).width(); });
if (scrollLeft > maxScrollLeft) nowTH--;
dv.attr('scrollLeft', scrollLeft);
return false;
});
$(function () {
if (startTH != '') {
nowTH = ths.filter(':contains("' + startTH + '")').index();
if (nowTH != -1) $('#scLeft').trigger('click', 'init');
else nowTH = 0; //找不到开始的th对象则还是从0开始
}
});
</script>
</body>
</html>