cols, col Gruppen und CSS: hover Pseudo-Klasse

Question

Ich versuche, eine Tabelle erstellen eine individuelle BMI angezeigt werden soll.

Als Teil dieser, ich möchte, auf. Schweben, für die <tr> und <col> (oder <colgroup>) auch um hervorzuheben, für die Kreuzung deutlicher sein

Wie die Tabelle metrische und imperiale Messungen verfügen wird, die: hover muss nicht an der Zelle nicht mehr (aus jeder Richtung) und würden in der Tat sein, einen Bonus, wenn sie von einer Achse auf die andere verlängern. Ich bin auch die XHTML 1.1 Strict doctype verwenden, wenn dies einen Unterschied macht?

So ... ein Beispiel (die reale Tabelle der ... größer), aber dies sollte repräsentativ sein:

<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>

Bin ich das Unmögliche zu fragen, muss ich JQuery-Stationen gehen?

Answer 1

Hier ist eine reine CSS-Methode kein Javascript verwenden.

I verwendet ::before und ::after pseudo-Elemente, die die Zeilen- und Spaltenhervorhebung zu tun. z-index hält die Markierung unterhalb des <tds> falls Sie Ereignisse behandeln müssen klicken. position: absolute ermöglicht es ihnen, die Grenzen des <td> zu verlassen. overflow: hidden auf dem <table> versteckt den Highlight Überlauf.

Es war nicht notwendig, aber ich habe es auch nur die Zeile oder Spalte auswählen, wenn Sie in den Headern sind. Die .row und .col Klassen kümmern sich um diese. Wenn Sie die simplify möchten, können Sie sie entfernen.

Dies funktioniert in allen modernen Browsern (und degradiert anmutig auf älteren Browsern durch nichts zu tun).

Demo: http://jsfiddle.net/ThinkingStiff/rUhCa/

Ausgabe:

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>

Answer 2

Es ist ein sehr anständiger jQuery-Plugin ich auf gekommen sind, hier befindet , die machen einen sehr guten Job dieser Art der Sache mit vielen Beispielen. Bevorzugt würde ich das verwenden.

Answer 3

AFAIK CSS Schwebt auf TR die sind sowieso nicht in IE unterstützt, so dass bestenfalls der TR Teil davon nur in Firefox arbeiten.

Nie sogar eine :hover Arbeit an einer col / colgroup gesehen so nicht sicher, ob das möglich ist ...

Denken Sie mit einer JavaScript-Implementierung stecken könnten.

Theres ein Beispiel hier , die funktioniert (Zeilen und Spalten) in Firefox aber wieder in IE seine gebrochen ... cols nicht funktionieren.

Answer 4

Ich kam quer durch diese nette Art und Weise, es zu tun seine von css-tricks.com ich auch bereit, eine Geige, während mit ihm nichts Besonderes rumgespielt aber u kann die Idee, seinen mit dem gleichen Code zur Verfügung gestellt bekommen durch die CSS-Trick Seite

// Die 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>

// Die 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");
        }
    });
})

Überprüfen Sie die Geige hier out

Answer 5

Live-Antwort ( https://jsfiddle.net/craig1123/d7105gLf/ )

Es gibt bereits CSS und JQuery Antworten; aber ich habe eine einfache reine Javascript Antwort geschrieben.

Ich finde zunächst all col und td Tags, die den Index der Spalte jeder Zelle erhalten, indem element.cellIndex tun, und dann eine CSS-Klasse mit einem Hintergrund auf mouseenter hinzufügen und es auf mouseleave zu entfernen.

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));
}

Hier ist eine Geige