| Autor | Zpráva | ||
|---|---|---|---|
| vodys Profil |
#1 · Zasláno: 17. 2. 2021, 10:17:53
Dobrý den,
zajímá mě, zda-li se dá nějakým způsobem označit a stylovat následující span. Příklad: <td><span class="day event">24</span></td> <td><span class="day">25</span></td> Potřebuji vždy stylovat první span.day, který následuje po span.day.event V některých případech pak může být i takhle: <tr><td><span class="day event">24</span></td></tr> <tr><td><span class="day">25</span></td></tr> Existuje prosím nějaké univerzální řešení? Díky! |
||
| Radek9 Profil |
vodys:
Leda přes :has, podpora ale prakticky neexistuje. Šlo by tu třídu dát tomu <td>? Pak by to mohlo vypadat takhle:
<td class="event"><span class="day">24</span></td> <td><span class="day">25</span></td> td.event + td span.day {
color: red;
}U těch případů s <tr> je to stejný problém. Prostě nedáš dohromady selektor, který uvažuje nadřazené elementy. Možná zkusit něco jiného než tabulku, třeba flexbox nebo grid.
|
||
| vodys Profil |
#3 · Zasláno: 17. 2. 2021, 12:15:08
Radek9:
Díky za radu. Jediné, čím je v mých silách modifikovat js je pojmenovat každou td na stejnou třídu. Tedy: <td class="test"><span class="day event">24</span></td> <td class="test"><span class="day">25</span></td> |
||
| Radek9 Profil |
vodys:
Ta tabulka je tedy předgenerovaná a sahat se do ní nedá? Dalo by se to totiž třeba už při generování (např. v PHP) řešit přidáním třídy do následující buňky. Jinak se to samozřejmě dá řešit přes JS, ne každý ho ale musí mít zaplý. var days = document.querySelectorAll('table span.day')
for (let i = 0; i < days.length - 1; ++i) {
if (days[i].classList.contains('event')) {
days[i + 1].classList.add('after-event')
}
} |
||
| vodys Profil |
Tak tu funkci v js jsem našel..
for (var day = firstDay; day <= lastDay; day.setDate(day.getDate())) {
var tr = $('<tr></tr>');
//For each row
for (var i = 0; i < 7; i++) {
// var td = $('<td><span class="day">' + day.getDate() + '<span class="room-price">12$</span>' + '</span></td>');
var td = $('<td><span class="day">' + day.getDate() + '</span></td>');
//if today is this day
var ymd = day.getFullYear() + '-' + day.getMonth() + '-' + day.getDay();
var ymd = this.formatToYYYYMMDD(day);
// console.log(ymd);
if ($.inArray(this.formatToYYYYMMDD(day), plugin.events) !== -1) {
// console.log('found');
td.find(".day").addClass("event");
// tr.find(".test").addClass("event");
}
//if day is previous day
if (day < (new Date())) {
td.find(".day").addClass("wrong-day");
}
if (day.toDateString() === (new Date).toDateString()) {
td.find(".day").addClass("today");
td.find(".day").removeClass("wrong-day");
}
//if day is not in this month
if (day.getMonth() != fromDate.getMonth()) {
td.find(".day").addClass("wrong-month");
}Bohužel v js jsem jelito a tu podmínku tam zadat neumím :/ |
||
| Radek9 Profil |
vodys:
Mělo by stačit si na začátku před vnějším cyklem definovat nějaký flag: var afterEvent = false;
for (var day = firstDay; day <= lastDay; day.setDate(day.getDate())) {
...A potom postupovat obdobně jako při přidávání té třídy event: if (afterEvent) {
td.find(".day").addClass("after-event");
afterEvent = false;
}
if ($.inArray(this.formatToYYYYMMDD(day), plugin.events) !== -1) {
td.find(".day").addClass("event");
afterEvent = true;
} |
||
|
Časová prodleva: 3 roky
|
|||
0