hover tabel - Forum

Frank Conijn

28-05-2014 11:12

Met alleen CSS zal dat niet gaan, Jan. Dit zou moeten werken maar doet het niet:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo col:hover</title>
<style>
table {
    border-collapse: collapse;
}
td {
    border: 1px solid black;
}
td:hover {
    cursor: pointer;
}
col#col0 {
    background: yellow;
}
col#col0:hover {
    background: red;
}
</style>
</head>
<body>
<table>
    <colgroup>
        <col id="col0">
        <col id="col1">
        <col id="col2">
    </colgroup>
    <tr>
        <td>ISBN</td>
        <td>Title</td>
        <td>Price</td>
    </tr>
    <tr>
        <td>3476896</td>
        <td>My first HTML</td>
        <td>$53</td>
    </tr>
    <tr>
        <td>5869207</td>
        <td>My first CSS</td>
        <td>$49</td>
    </tr>
</table>
</body>
</html>

De eerste kolom is wel geel, maar wordt niet rood bij hover. Met een eenvoudig javascriptje is het echter wel mogelijk. Laat maar weten als je daarin toch geïnteresseerd bent.

Mich

28-05-2014 11:19

Row highlighting zou prima kunnen met CSS, maar Column highlighting, wat jij wil, is wat lastiger. Met een klein beetje javascript lukt dit wel. Artikel.

Jan R

28-05-2014 13:15

Daar vreesde ik alweer voor.
Toch allemaal bedankt

Mich

28-05-2014 13:25

Waarom vreesde je daarvoor? Waarom zou je geen javascript willen gebruiken? Het is tegenwoordig heel gewoon en veel makkelijker. Er zijn nog maar weinig websites zonder javascript.

Jan R

28-05-2014 13:45

Ik vreesde dat het niet mogelijk was zonder CSS.
ik heb nu al een werkende demo voor mij, via jouw link(bedankt). Nog eventjes en een productie :)

Er is veel mogelijk in css. veel meer dan ik ken.
Ik had bijvoorbeeld nog nooit van col in table gehoord. dus wel weer iets wijzer

Jan

Mich

28-05-2014 14:02

Er zijn heel veel leuke dingen mogelijk in CSS3, maar vaak is het net zo handig met bijv jQuery.
Zo leer je altijd weer wat bij :-) Succes

- SanThe -

28-05-2014 14:38

De style hoort uiteraard in het css bestand.
Dit zijn twee mogelijkheden. Met titel of zonder titel.


<?php
$gegevens = array(	array('ISBN','Title','Price'),
					array('3476896','My first HTML','$53'),
					array('5869207','My first CSS','$49')
				);

?>

<style>
div.alles
{
	overflow:	hidden;
}
div.titel
{
	float:		left;
	color:		red;
	width:		100px;
	margin:		1px;
}
div.veld
{
	margin:		1px;
}
div.hover
{
	float:		left;
	width:		100px;
	margin:		1px;
	background:	#F0F0F0;
}
div.hover:hover
{
	background:	yellow;
}
</style>

<?php
echo '<div class="alles">';
	for($x=0;$x<count($gegevens[0]);$x++)
	{
		echo '<div class="hover">';
			for($y=0;$y<count($gegevens);$y++)
			{
				$class = ($y==0) ? 'titel veld' : 'veld';
				echo '<div class="'.$class.'">'.$gegevens[$y][$x].'</div>';
			}
		echo '</div>';
	}
echo '</div>';
echo '<br/><br/><br/><br/>';
echo '<div class="alles">';
	echo '<div class="titel">'.implode('</div><div class="titel">', $gegevens[0]).'</div>';
	echo '<div class="clear"></div>';
	for($x=0;$x<count($gegevens[0]);$x++)
	{
		echo '<div class="hover">';
			for($y=1;$y<count($gegevens);$y++)
			{
				echo '<div class="veld">'.$gegevens[$y][$x].'</div>';
			}
		echo '</div>';
	}
echo '</div>';
?>

Frank Conijn

28-05-2014 14:57 gewijzigd op 28-05-2014 19:29

Michael - op 28/05/2014 11:19:37

Met een klein beetje javascript lukt dit wel. Artikel.

jQuery is natuurlijk niet 'een klein beetje javascript'. Dat is heel veel javascript. Dit is een klein beetje:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo col:onmousover</title>
<style>
table {
    border-collapse: collapse;
}
td {
    border: 1px solid black;
}
td:hover {
    cursor: pointer;
}
</style>
</head>
<body>
<table id="table1">
    <colgroup>
        <col>
        <col>
        <col>
    </colgroup>
    <tr>
        <td>ISBN</td>
        <td>Title</td>
        <td>Price</td>
    </tr>
    <tr>
        <td>3476896</td>
        <td>My first HTML</td>
        <td>$53</td>
    </tr>
    <tr>
        <td>5869207</td>
        <td>My first CSS</td>
        <td>$49</td>
    </tr>
</table>
<script>
var cols = document.getElementById('table1').getElementsByTagName('col');
var TRs = document.getElementById('table1').getElementsByTagName('tr');
for (var j=0; j<TRs.length; j++) {
    var eachTR = TRs[j];
    var TDs = eachTR.getElementsByTagName('td');
    for (var k=0; k<TDs.length; k++) {
        TDs[k].nr = k;
        TDs[k].onmouseover = function() {
            this.parentNode.style.background = 'red'; // optioneel
            this.style.background = 'maroon';         // optioneel
            this.style.color = 'white';               // optioneel
            var colNr = this.nr;
            cols[colNr].style.background = 'red';
        }
        TDs[k].onmouseout = function() {
            this.parentNode.style.background = '';    // optioneel
            this.style.background = '';               // optioneel
            this.style.color = '';                    // optioneel
            var colNr = this.nr;
            cols[colNr].style.background = '';
        }
    }
}
</script>
</body>
</html>

Edit: opties toegevoegd die 2D-effect geven, zoals het jQuery-script dat ook geeft.

Jan R

29-05-2014 07:41

@sanThe: Hier verlies ik de tr highlichting. Is wel een goeie aanpak
@Frank Conijn. Is ongeveer hetzelfde als deze van Michael. Ik heb het voorbeeld daar gebruik. Wel met jq 2

Allemaal bedankt voor het bekijken en helpen

Jan

Frank Conijn

29-05-2014 12:50 gewijzigd op 29-05-2014 13:00

Beste Jan,

Het enige overgebleven principiële renderingsverschil tussen het jQuery- en het elementaire Javascript is dat in in het eerste het tabelhoofd dezelfde kleur blijft houden bij de onmouses. Dat is echter met kleine toevoeging aan het CSS-blokje ook in het tweede te realiseren:


tr:first-child td {
    background: yellow !important;
    color: black !important;
}