cols, gruppi Col e css: hover classe pseudo
-
21-08-2019 - |
Domanda
Sto cercando di creare una tabella per visualizzare BMI di un individuo.
Come parte di questo, vorrei, on: hover, per la <tr>
e <col>
(o <colgroup>
) da evidenziare anche, in modo che l'intersezione di essere più evidente.
Come risulta dalla tabella conterrà misurazioni sia metriche e in pollici, il: hover non deve fermarsi alla cella (da qualsiasi direzione) e sarebbe, infatti, essere un vantaggio se estesa da un asse all'altro. Sto anche utilizzando il doctype XHTML 1.1 Strict, se questo fa la differenza?
Quindi ... un esempio (il vero del tavolo ... più grande), ma questo dovrebbe essere rappresentativo:
<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>
Sono io a chiedere l'impossibile, devo andare JQuery-reparti?
Soluzione
Ecco un metodo CSS puro senza usare Javascript.
Ho usato ::before
e ::after
pseudo-elementi per fare l'evidenziazione riga e colonna. z-index
mantiene l'evidenziazione al di sotto del <tds>
nel caso in cui è necessario gestire eventi click. position: absolute
permette loro di lasciare i confini della <td>
. overflow: hidden
sul <table>
nasconde l'overflow clou.
Non è stato necessario, ma ho anche reso selezionare solo la riga o colonna quando sei nelle intestazioni. Il .row
e .col
classi prendersi cura di questo. Se si desidera che il semplificare, è possibile rimuoverli.
Questo funziona in tutti i browser moderni (e degrada con grazia il browser più vecchi non facendo nulla).
Demo: http://jsfiddle.net/ThinkingStiff/rUhCa/
Output:
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>
Altri suggerimenti
Non è un plugin jQuery molto dignitoso che ho incontrato rel="noreferrer"> che fa un ottimo lavoro di questo genere di cose con un sacco di esempi. Preferibilmente userei questo.
Per quanto ne sappia CSS aleggia sulla s 'TR
non sono supportati in IE comunque, così al meglio la parte di TR che funziona solo in Firefox.
mai visto un'opera :hover
su un colle / colgroup quindi non so se è possibile ...
che si potrebbe essere bloccato con un'implementazione JavaScript.
Theres un esempio qui che funziona (righe e cols) in Firefox ma ancora una volta le sue rotte in IE ... cols non funzionano.
Sono venuto incontrato questo modo pulito di farlo proprio da css-tricks.com ho anche preparato un violino, mentre fare in giro con esso niente di speciale ma u può ottenere l'idea propria con lo stesso codice fornito da tale pagina 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>
// Il 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");
}
});
})
Risposta diretta ( https://jsfiddle.net/craig1123/d7105gLf/ )
Ci sono già CSS e jQuery risposte; tuttavia, ho scritto una risposta semplice javascript puro.
ho trovate tutte le col
e td
tag, ottengo l'indice di colonna di ogni cella facendo element.cellIndex
, e quindi aggiungere una classe CSS con uno sfondo sul mouseenter
e la rimozione su 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));
}