cols, colgroups i css: hover psuedoclass
Próbuję stworzyć tabelę wyświetlającą BMI danej osoby.
W ramach tego, chciałbym, na: hover, dla <tr>
oraz <col>
(lub <colgroup>
), Aby skrzyżowanie było bardziej widoczne.
Ponieważ tabela będzie zawierała zarówno miary metryczne, jak i imperialne,: hover nie musi zatrzymywać się na komórce (z dowolnego kierunku) i w rzeczywistości byłby bonusem, jeśli rozciągnie się z jednej osi na drugą. Używam też XHTML 1.1 Strict doctype, jeśli to coś zmieni?
So...an example (the real table ' s...większe), ale to powinno być reprezentatywne:
<script>
tr:hover {background-color: #ffa; }
colgroup:hover,
col:hover {background-color: #ffa; }
</script>
...
<table>
<col class="weight"></col><colgroup span="3"><col class="bmi"></col></colgroup>
<tr>
<th></th>
<th>50kg</th>
<th>55kg</th>
<th>60kg</th>
</tr>
<tr>
<td>160cm</td>
<td>20</td>
<td>21</td>
<td>23</td>
</tr>
<tr>
<td>165cm</td>
<td>18</td>
<td>20</td>
<td>22</td>
</tr>
<tr>
<td>170cm</td>
<td>17</td>
<td>19</td>
<td>21</td>
</tr>
</table>
Czy pytam o niemożliwe, czy muszę przejść do jQuery-wards?
5 answers
Oto czysta metoda CSS bez Javascript.
Użyłem pseudoelementów ::before
i ::after
do podświetlania wierszy i kolumn. z-index
utrzymuje podświetlenie Pod <tds>
na wypadek konieczności obsługi zdarzeń kliknięć. position: absolute
pozwala im opuścić granice <td>
. overflow: hidden
na <table>
ukrywa przepełnienie podświetlenia.
Nie było to konieczne, ale zrobiłem to również wybrać tylko wiersz lub kolumnę, gdy jesteś w nagłówkach. Zajęcia .row
i .col
zajmują się tym. Jeśli chcesz uprościć, możesz je usunąć.
To działa we wszystkich nowoczesnych przeglądarkach(i degraduje wdzięcznie w starszych przeglądarkach, nie robiąc nic).
Demo: http://jsfiddle.net/ThinkingStiff/rUhCa/
Wyjście:
CSS:
table {
border-spacing: 0;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}
td, th, .row, .col {
cursor: pointer;
padding: 10px;
position: relative;
}
td:hover::before,
.row:hover::before {
background-color: #ffa;
content: '\00a0';
height: 100%;
left: -5000px;
position: absolute;
top: 0;
width: 10000px;
z-index: -1;
}
td:hover::after,
.col:hover::after {
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
HTML:
<table>
<tr>
<th></th>
<th class="col">50kg</th>
<th class="col">55kg</th>
<th class="col">60kg</th>
<th class="col">65kg</th>
<th class="col">70kg</th>
</tr>
<tr>
<th class="row">160cm</th>
<td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
</tr>
<tr>
<th class="row">165cm</th>
<td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
</tr>
<tr>
<th class="row">170cm</th>
<td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
</tr>
<tr>
<th class="row">175cm</th>
<td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
</tr>
</table>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-30 17:51:41
Jest bardzo przyzwoita wtyczka jQuery, na którą natknąłem się znajduje się tutaj, która robi bardzo dobrą robotę tego typu rzeczy z mnóstwem przykładów. Wolałbym tego użyć.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-05-11 16:24:22
AFAIK CSS unosi się na TR
' s nie są obsługiwane w IE i tak, więc w najlepszym razie część TR będzie działać tylko w Firefoksie.
Nigdy nie widziałem pracy :hover
na grupie col/colgroup, więc nie wiem, czy to możliwe...
Myślę, że możesz utknąć z implementacją Javascript.
Jest przykład tutaj który działa (rows & cols) w Firefoksie ale znowu jest zepsuty w IE... cols nie działa.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-05-11 16:19:11
I came accross this neat way of doing it its from css-tricks.com i również przygotowany skrzypek podczas zabawy z nim nic fantazyjne, ale u można uzyskać pomysł jego z tym samym kodem dostarczonym przez stronę CSS-trick
//Html
<table>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
//Js
$(function(){
$("table").delegate('td','mouseover mouseleave', function(e) {
if (e.type == 'mouseover') {
$(this).parent().addClass("hover");
$("colgroup").eq($(this).index()).addClass("hover");
}
else {
$(this).parent().removeClass("hover");
$("colgroup").eq($(this).index()).removeClass("hover");
}
});
})
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-16 03:06:14
Live answer ( https://jsfiddle.net/craig1123/d7105gLf/)
Są już odpowiedzi CSS i JQuery; jednak napisałem prostą, czystą odpowiedź javascript.
Najpierw znajduję wszystkie tagi col
i td
, uzyskuję indeks kolumn każdej komórki wykonując element.cellIndex
, a następnie dodaję klasę CSS z tłem na mouseenter
i usuwam ją na mouseleave
.
HTML
<table id='table'>
<col />
<col />
<col />
<col />
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Birthdate</th>
<th>Preferred Hat Style</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abraham Lincoln</td>
<td>204</td>
<td>February 12</td>
<td>Stovepipe</td>
</tr>
<tr>
<td>Winston Churchill</td>
<td>139</td>
<td>November 30</td>
<td>Homburg</td>
</tr>
<tr>
<td>Rob Glazebrook</td>
<td>32</td>
<td>August 6</td>
<td>Flat Cap</td>
</tr>
</tbody>
</table>
CSS
body {
font: 16px/1.5 Helvetica, Arial, sans-serif;
}
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
table th {
text-align: left;
}
table tr, table col {
transition: all .3s;
}
table tbody tr:hover {
background-color: rgba(0, 140, 203, 0.2);
}
table col.hover {
background-color: rgba(0, 140, 203, 0.2);
}
tr, col {
transition: all .3s;
}
tbody tr:hover {
background-color: rgba(0,140,203,.2);
}
col.hover {
background-color: rgba(0,140,203,.2);
}
JS
const col = table.getElementsByTagName('col');
const td = document.getElementsByTagName('td');
const columnEnter = (i) => col[i].classList.add('hover');
const columnLeave = (i) => col[i].classList.remove('hover');
for (const cell of td) {
const index = cell.cellIndex;
cell.addEventListener('mouseenter', columnEnter.bind(this, index));
cell.addEventListener('mouseleave', columnLeave.bind(this, index));
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-15 18:25:18