Показать сообщение отдельно
  #3 (permalink)  
Старый 30.01.2014, 15:13
Новичок на форуме
Отправить личное сообщение для didimka Посмотреть профиль Найти все сообщения от didimka
 
Регистрация: 30.01.2014
Сообщений: 8

рони,
в ячейках с id = day надо
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script type="text/javascript" src="jquery.js"></script>
<style>
table{width:80%;
height:70%;}
th {width:100px;
border:1px solid red;}
td{width:100px;
height:20px;
border:1px solid red;}
</style>
</head>
<body>
<script>
var TABLE={};
TABLE.fixHeader = function (table){
$(table).each(function(){
var $table = $(this);
var $thead = $table.find('thead');
var $ths = $thead.find('th');
$table.data('top'.$thead.offset().top);
$table.data('left'.$thead.offset().left);
$table.data('bottom'.$thead.offset('top')+$table.height() - 
$thead.height());
});
};
var $list = $('<ul class="faux-head"></ul>');
$ths.each(function(i) {
_th = $(this);
$list.append($("<li></li>")
.addClass(_th.attr("class"))
.html(_th.html())
.width(_th.width())
.click(function() {
_th.click()})
).hide().css({left: $table.data('left'), top: $table.data('top')});
});
$('body').append($list);
$(window).scroll(function() {
clearTimeout(timer);
timer = setTimeout(function(){
if ($table.data('top') < $(document).scrollTop()&&
$(document).scrollTop() < $table.data('bottom')){
$list
.show()
.stop()
.animate({
top: $(document)scrollTop(),
opacity: 1});
} else {
$list.fadeOut(function(){
$(this).css({top: $table.data('top')});
});
}
}, 100);
});
TABLE.fixHeader("#timetable")
</script>
<table id="timetable">
<thead>
<tr>
<th>day</th>
<th>start</th>
<th>stop</th>
<th>802</th>
<th>803</th>
<th>804</th>
<th>805</th>
<th>806</th>
<thead>
</thead>
<tbody>
<tr><td id="day"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td id="day"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td id="day"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td id="day"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td id="day"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td id="day"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td id="day"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>
</body>
</html>
j

Последний раз редактировалось didimka, 30.01.2014 в 15:36.
Ответить с цитированием