Форум

didimka · #1 (**permalink**) 30.01.2014, 14:10

Суть проблемы: есть таблица-расписание(на html), как добавить в первый СТОЛБЕЦ таблицы даты по неделям, и добавить стрелки переключатели на предыдущую и следующую недели??

рони · #2 (**permalink**) 30.01.2014, 14:36

didimka,
где код?

didimka · #3 (**permalink**) 30.01.2014, 15:13

рони,
в ячейках с 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

рони · #4 (**permalink**) 30.01.2014, 16:07

Сообщение от didimka

id = day

а вы в курсе что такие близнецы вне закона валидности?

didimka · #5 (**permalink**) 30.01.2014, 16:15

рони, я обозначил слово day для наглядности, вопрос остался прежним, можно сделать или нет и как??

рони · #6 (**permalink**) 30.01.2014, 17:26

didimka,

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
th span{
  cursor: pointer;
}
table{width:80%;
height:70%;}
th {width:100px;
border:1px solid red;}
td{width:100px;
height:20px;
border:1px solid red;}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
$(function () {
     var tr = $("#timetable tr"),
         first = $("td:first", tr),
         th = $("#timetable th:first"),
         day = new Date,
         span;
     date = day.getDay();
     !date && (date = 7);

     function set(date) {
         day.setDate(day.getDate() - date);
         first.each(function (indx, el) {
             day.setDate(day.getDate() + 1);
             $(el).html(day.toLocaleDateString()) //отформатируйте дату как вам нужно
         })
     }
     set(date);
     span = $("<span/>", {
         text: "\u25c0",
         click: function () {
             set(14)
         },
         css: {
             "float": "left"
         }
     });
     th.prepend(span);
     span = $("<span/>", {
         text: "\u25b6",
         click: function () {
             set(0)
         },
         css: {
             "float": "right"
         }
     });
     th.append(span)
 });
  </script>
</head>
<body>
<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></tr>
</thead>
<tbody>
<tr><td id="day">111</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>

didimka · #7 (**permalink**) 30.01.2014, 22:03

рони,
Спасибо Огромное!!!!!!!!!!!

Форум

Справочник

Discord чат

Курсы javascript