Помогите с календарем!!!!!
:help: Суть проблемы: есть таблица-расписание(на html), как добавить в первый СТОЛБЕЦ таблицы даты по неделям, и добавить стрелки переключатели на предыдущую и следующую недели?? :help:
|
didimka,
где код? |
рони,
в ячейках с 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 |
Цитата:
|
рони, я обозначил слово day для наглядности, вопрос остался прежним, можно сделать или нет и как??
|
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> |
рони,
Спасибо Огромное!!!!!!!!!!! |
Часовой пояс GMT +3, время: 14:46. |