hover tabel
Via tr:hover kan ik een rij een achtergrond kleur geven. Kan zoiets ook voor kolommen?
Dus wel niet via java enkel css
Jan
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!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>
<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.
Toch allemaal bedankt
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
Zo leer je altijd weer wat bij :-) Succes
Dit zijn twee mogelijkheden. Met titel of zonder titel.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<?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>';
?>
$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>';
?>
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!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>
<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.
Gewijzigd op 28/05/2014 19:29:55 door Frank Conijn
@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
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:
Code (php)
1
2
3
4
2
3
4
tr:first-child td {
background: yellow !important;
color: black !important;
}
background: yellow !important;
color: black !important;
}
Gewijzigd op 29/05/2014 13:00:06 door Frank Conijn