Помогите с календарем!!!!!
: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, время: 23:27. |