|
Как убрать форматирование таблицы по условию пустой клетки
#39835203
Ссылка:
Ссылка на сообщение:
Ссылка с названием темы:
|
|
|
|
Есть скрипт календаря, нужно чтобы если дней в месяце меньше чем ячеек в таблице - пустые ячейки не форматировались ( не отделялись границами).
Как вариант красить их границы в белый цвет, залить цветом.... Или посоветуйте другой аналогичный виджет (если этот поправить нельзя)
пример можно посмотреть на сайте - jurvrn.ru
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;border-style:solid;border-width:1px;border-color:#561;margin:0px auto;}
.tg td {font-family: Arial, sans-serif;font-size:14px;padding:5px 8px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#f0f0f0;color:#333;background-color:#fff;}
.tg th {font-family: Arial, sans-serif;font-size:14px;font-weight:normal;padding:5px 10px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#f0f0f0;color:#333;background-color:#f0f0f0;}
.tg .tg-s6z2 {text-align: center}
.tg-wrap {float: none; position: relative;}
@media screen and (max-width: 767px) {
.tg {width: auto !important;}
.tg col {width: auto !important;}
.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch; margin: auto 0px;}
}
#calendar3 thead tr:last-child {
font-size: small;
color: rgb(85, 85, 85);
}
#calendar3 tbody td {
color: rgb(44, 86, 122);
}
#calendar3 tbody td:nth-child(n+6), #calendar3 .holiday {
color: rgb(126, 13, 1);
}
#calendar3 tbody td.today {
outline: 3px solid red;
}
#polegod {width:5em; padding-left: 0.5em;}
#polegod::-webkit-inner-spin-button { opacity: 1; }
</style>
<div class="tg-wrap"><table id="calendar3" class="tg">
<thead>
<tr>
<th class="tg-s6z2" colspan="4"><select>
<option value="0">Январь</option>
<option value="1">Февраль</option>
<option value="2">Март</option>
<option value="3">Апрель</option>
<option value="4">Май</option>
<option value="5">Июнь</option>
<option value="6">Июль</option>
<option value="7">Август</option>
<option value="8">Сентябрь</option>
<option value="9">Октябрь</option>
<option value="10">Ноябрь</option>
<option value="11">Декабрь</option>
</select></th>
<th class="tg-s6z2" colspan="3"><input type="number" id="polegod" value="" min="0" max="9999" size="4"></th>
</tr>
<tr>
<td class="tg-s6z2">Пн</td>
<td class="tg-s6z2">Вт</td>
<td class="tg-s6z2">Ср</td>
<td class="tg-s6z2">Чт</td>
<td class="tg-s6z2">Пт</td>
<td class="tg-s6z2">Сб</td>
<td class="tg-s6z2">Вс</td>
</tr>
</thead><tbody></tbody></table></div>
<script>
function Calendar3(id, year, month) {
var Dlast = new Date(year,month+1,0).getDate(),
D = new Date(year,month,Dlast),
DNlast = D.getDay(),
DNfirst = new Date(D.getFullYear(),D.getMonth(),1).getDay(),
calendar = '<tr>',
m = document.querySelector('#'+id+' option[value="' + D.getMonth() + '"]'),
g = document.querySelector('#'+id+' input');
if (DNfirst != 0) {
for(var i = 1; i < DNfirst; i++) calendar += '<td>';
}else{
for(var i = 0; i < 6; i++) calendar += '<td>';
}
for(var i = 1; i <= Dlast; i++) {
if (i == new Date().getDate() && D.getFullYear() == new Date().getFullYear() && D.getMonth() == new Date().getMonth()) {
calendar += '<td class="today">' + i;
} else {
calendar += '<td>' + i;
}
if (new Date(D.getFullYear(),D.getMonth(),i).getDay() == 0) {
calendar += '<tr>';
}
}
for(var i = DNlast; i < 7; i++) calendar += '<td> ';
document.querySelector('#'+id+' tbody').innerHTML = calendar;
g.value = D.getFullYear();
m.selected = true;
if (document.querySelectorAll('#'+id+' tbody tr').length < 6) {
document.querySelector('#'+id+' tbody').innerHTML += '<tr><td> <td> <td> <td> <td> <td> <td> ';
}
document.querySelector('#'+id+' option[value="' + new Date().getMonth() + '"]').style.color = 'rgb(230, 33, 33)'; // в выпадающем списке выделен текущий месяц
}
Calendar3("calendar3",new Date().getFullYear(),new Date().getMonth());
document.querySelector('#calendar3').onchange = function Kalendar3() {
Calendar3("calendar3",document.querySelector('#calendar3 input').value,parseFloat(document.querySelector('#calendar3 select').options[document.querySelector('#calendar3 select').selectedIndex].value));
}
</script>
|
|
|
