Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Помогите с календарем!!!!! (https://javascript.ru/forum/dom-window/44716-pomogite-s-kalendarem.html)

didimka 30.01.2014 14:10

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

рони 30.01.2014 14:36

didimka,
где код?

didimka 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

рони 30.01.2014 16:07

Цитата:

Сообщение от didimka
id = day

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

didimka 30.01.2014 16:15

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

рони 30.01.2014 17:26

didimka,
:write: :cray:
<!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 30.01.2014 22:03

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


Часовой пояс GMT +3, время: 14:46.