hover tabel

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Grafisch vormgever

Standplaats: Maasland Aantal uren: 32 – 40 uur per week Opleidingsniveau: HBO werk- en denkniveau Ben jij een ambitieuze grafisch vormgever met een passie voor creativiteit en oog voor detail? Vind jij het daarnaast leuk om ook marketingactiviteiten op te pakken? Dan zijn wij op zoek naar jou! Bedrijfsinformatie Westacc Group BV is het zusterbedrijf van HABA en specialiseert zich in (maatwerk) oplossingen voor (elektro) techniek en verlichting in de kampeerbranche. Zij produceren en assembleren onderdelen voor caravans, campers en boten. Voor een groot aantal caravan- en campermerken leveren wij producten als zekeringkasten, invoerdozen, acculaders, schakelmateriaal en verlichting. De producten

Bekijk vacature »

Medior/senior Python developer

Functie Bedrijven komen bij deze organisatie om technische vraagstukken op te lossen en hierin ook tot oplossingen te komen waar ze zelf misschien niet aan gedacht hadden. Jij gaat vanuit je ervaring dus niet alleen hands-on aan de slag met het ontwikkelen, maar zult ook zeker adviseren en proactief meedenken met de klant. Er zijn meerdere lange en/of korte projecten en het type klanten is heel uiteenlopend. Zo kun je terecht komen in een multidisciplinair scrumteam waarin je als Python developer meewerkt, of juist voor een kleiner (Greenfield) project aan de slag gaan waarin je veel breder bezig bent. Door

Bekijk vacature »

Fullstack developer

Functie omschrijving We are looking for a dutch native speaker Wil jij werken als Senior Developer en werken aan een applicatie die duizenden marketingcampagnes automatisch aanstuurt? Dit is je kans! Kom werken voor onze opdrachtgever en in deze rol zul je veel vrijheid en verantwoordelijkheid krijgen om gezamenlijk de applicatie naar een hoger plan te tillen. Wat ga je verder doen: Optimaliseren, beheren en uitbreiden van onze applicatie; Het bouwen van aansluitingen op de systemen van partners middels API’s; Meedenken over de technische/ontwikkel-standaarden; Proactief verbeterpunten voorstellen. Bedrijfsprofiel Het is een organisatie die met een team van verschillende developers én marketeers

Bekijk vacature »

Als Front-end developer bijdragen aan het onderwij

Functie Als front-end developer om je terecht in een team van goede en ervaren developers, en ga je werken aan de software die door miljoenen mensen gebruikt wordt. Je bent in staat om designs effectief te vertalen naar werkende feautures en hebt oog voor een goede UX van het product. Je staat voor clean code en goede documentatie. Je ziet toegevoegde waarde in het beoordelen van het werk van collega’s om zo samen te streven naar hoge kwaliteit software en code. Je dagelijkse werk bestaat uit het werken aan componenten in de Storybook. Het verbeteren en refactoren van de huidige

Bekijk vacature »

Lead C++ Developer

The role of Lead C++ Developer As Lead C++ Developer at KUBUS you will be responsible for the implementation design of requirements and the software architecture of the desktop applications of BIMcollab, our platform for 3D model validation and issue management aimed at improving the quality of 3D building design models. Better 3D models lead to better buildings, thus contributing to the sustainability of the built environment with smarter use of materials, less waste and energy-efficient buildings. A good user experience is of paramount importance to us; we go for innovation and quality in our development. In your role as

Bekijk vacature »

Python (Django) developer - Remote in The Netherla

Functie Together with your team, consisting of a senior, 2 mediors and one junior developer, you will work on their software in an Agile-based approach. You have an eye for quality, risk, and customer interest. Communication with your colleagues and, where necessary, with customers, plays an important role in achieving a successful result. As a person, you are smart, get things done, and are result-oriented. There is a lot of independence within the development team, apart from the stand-up (10:00 am) and occasional pair-programming sessions. Techniques they use include Python, Django, MySQL, Mercurial, Ubuntu Linux, Nginx. In terms of front-end

Bekijk vacature »

Junior .NET developer

Functie Als junior .NET ontwikkelaar start jij in ons development team met twee andere .NET developers. Als team werken jullie in scrum en is er iedere ochtend om 11.00 een standup. Jij krijgt als junior .NET ontwikkelaar een inwerk traject dat echt specifiek wordt ingericht op basis van wat jij nodig hebt. Een van de grootste pluspunten bij ons is dat wij binnen ons bedrijf veel (technische) vrijheid geven en juist eigen initiatieven erg stimuleren. Jouw werkzaamheden gaan er bij ons als volgt uit zien: – Het ontwikkelen van nieuwe software samen met interne en eventueel externe ontwikkelaars; – Het

Bekijk vacature »

Junior PHP Developer

Je maakt een vliegende start van je carrière, door meteen mee te bouwen aan de digitale aspecten van Coolblue. Wat doe je als Junior PHP Developer bij Coolblue? Als Junior PHP Developer ben je meteen vanaf de start onderdeel van een development team. Je kijkt veel mee met collega’s en volgt trainingen om te groeien als Junior Developer. Op dat moment komt je wil om steeds te blijven leren naar boven. Daarnaast pak je in de sprints ook je eigen stories op om Coolblue iedere dag een beetje beter te kunnen maken. Je sterk analytisch vermogen komt dan ook goed

Bekijk vacature »

C# developer

Functie Als ervaren Software Engineer wordt jij verantwoordelijk voor het bedenken en ontwikkelen van technische (maatwerk) oplossingen voor onze klanten en dit samen met de klant af te stemmen. Jij wordt o.a. verantwoordelijk voor de doorontwikkeling het software pakket welke voor ons enorm belangrijk is. Dit pakket zorgt er namelijk voor dat wij complete productielijnen kunnen aansturen en monitoren. Daarnaast heb jij actief contact met onze hoofdvestiging om het software achter een van onze systemen te verbeteren en te herschrijven. Momenteel zijn onze C# applicaties geschreven met o.a. Winforms. Echter hebben wij de actieve ambitie om dit te gaan herschrijven

Bekijk vacature »

Java Developer

Java/Kotlin Developer Ben jij een ervaren Java/Kotlin developer met een passie voor het automatiseren van bedrijfsprocessen? Wil je graag deelnemen aan uitdagende projecten bij aansprekende klanten? En ben je op zoek naar een professioneel, ambitieus en dynamisch bedrijf om je carrière verder te ontwikkelen? Kom dan ons team bij Ritense in Amsterdam versterken! Zo ziet de functie eruit: Als Java/Kotlin developer bij Ritense ben je verantwoordelijk voor de ontwikkeling en implementatie van applicaties die bedrijfsprocessen automatiseren, zodat onze klanten slimmer, efficiënter en klantgerichter kunnen werken. Als developer ben je in de lead en zorg je voor de correcte oplevering van

Bekijk vacature »

PHP Developer

Zie jij mogelijkheden om onze tooling technisch te verbeteren en uit te bouwen? Over Jobmatix Jobmatix is een innovatieve en internationale speler op het gebied van jobmarketing. Onze jobmarketing automation tool helpt organisaties bij het aantrekken van nieuw talent door vacatures digitaal, geautomatiseerd en op een efficiënte manier te adverteren en onder de aandacht te brengen bij de doelgroep op 25+ jobboards. Volledig performance-based, waarbij organisaties betalen op basis van cost per click of cost per applicant. Maandelijks wordt onze jobmarketing automation tool al gebruikt door vele directe werkgevers, intermediairs en mediabureaus, waaronder Picnic, Rijkswaterstaat, AdverOnline, Schiphol, DPA, Teleperformance en

Bekijk vacature »

.NET Developer

Dit ga je doen Programmeren in .NET, Javascript & C# en ontwikkelen in Web Services, Windows Services en MS SQL Server; Zelfstandig verbanden maken Analyseren, testen, bugs fixen, reviewen en rapporteren; Juiste prioriteiten stellen en verantwoordelijkheid nemen; Op architectuur niveau meedenken; Af en toe klanten bezoeken. Hier ga je werken Voor onze relatie zijn wij opzoek naar een .NET ontwikkelaar met minimaal 3 jaar werkervaring. Je komt te werken in een groeiend bedrijf met betrokken collega's die zorgen voor een familiaire sfeer op de werkvloer. Als .NET ontwikkelaar word jij vanaf de eerste werkdag betrokken bij het gehele ontwikkelproces. De

Bekijk vacature »

SQL database ontwikkelaar

Functie omschrijving Ben jij niet bang voor complexe algoritmes? Schikt het schrijven van procedures in T-SQL jouw niet af en heb jij al de nodige informatie in SQL, dan is functie precies wat voor jou! Jouw werkzaamheden gaan er als volgt uit zien: Je gaat werken aan de complexere projecten waar jij van A tot Z bij betrokken bent. Je gaat zorg dragen voor het ontwerp, de ontwikkeling en het updaten van SQL databases. Dit doe je op basis van T-SQL. Jij bent van start tot finish betrokken bij de projecten die jij leidt. Je houdt contact met klanten en

Bekijk vacature »

Traineeship Full Stack Java developer

Dit ga je doen Start jij op 7 augustus bij de Experis Academy dan kickstart jij jouw IT-carrière! We leiden je op tot een gewilde Full Stack Java Developer met alle kennis en vaardigheden die nodig zijn om de arbeidsmarkt te betreden. Wat kun je verwachten, hoe zit een dag in het leven van een Trainee eruit? Periode 1 Als Full Stack Java Developer Trainee volg je vanuit huis een op maat gemaakte onlinetraining die in het Engels wordt gegeven. De tijd die je kwijt bent aan het volgen van de training kun je vergelijken met een fulltime werkweek. In

Bekijk vacature »

C# .NET Developer

Functie omschrijving Wij zijn op zoek naar een C# .NET Developer voor een bedrijf in de omgeving van Utrecht! Wil jij werken voor een internationaal bedrijf waar je legio mogelijkheden krijgt als Software Ontwikkelaar? Grijp nu je kans! Je kunt een uitdagende rol gaan vervullen als C#.NET Developer binnen een internationaal bedrijf dat gevestigd is in omgeving van Utrecht. Je zult gaan samenwerken met collega's die over de hele wereld verspreid zitten. Dit bedrijf is zeer vooruitstrevend en werkt met de nieuwste technieken. Als C#.NET Developer ga jij je bezig houden met het volgende: Je blijft op de hoogte van

Bekijk vacature »
Jan R

Jan R

26/05/2014 11:29:22
Quote Anchor link
Hi,

Via tr:hover kan ik een rij een achtergrond kleur geven. Kan zoiets ook voor kolommen?
Dus wel niet via java enkel css

Jan
 
PHP hulp

PHP hulp

29/03/2024 14:48:05
 
Frank Conijn

Frank Conijn

28/05/2014 11:12:06
Quote Anchor link
Met alleen CSS zal dat niet gaan, Jan. Dit zou moeten werken maar doet het niet:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!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.
 
Michael -

Michael -

28/05/2014 11:19:37
Quote Anchor link
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

Jan R

28/05/2014 13:15:51
Quote Anchor link
Daar vreesde ik alweer voor.
Toch allemaal bedankt
 
Michael -

Michael -

28/05/2014 13:25:49
Quote Anchor link
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

Jan R

28/05/2014 13:45:40
Quote Anchor link
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
 
Michael -

Michael -

28/05/2014 14:02:52
Quote Anchor link
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 -

- SanThe -

28/05/2014 14:38:59
Quote Anchor link
De style hoort uiteraard in het css bestand.
Dit zijn twee mogelijkheden. Met titel of zonder titel.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<?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

Frank Conijn

28/05/2014 14:57:32
Quote Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
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
<!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.
Gewijzigd op 28/05/2014 19:29:55 door Frank Conijn
 
Jan R

Jan R

29/05/2014 07:41:59
Quote Anchor link
@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

Frank Conijn

29/05/2014 12:50:17
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
tr:first-child td {
    background: yellow !important;
    color: black !important;
}
Gewijzigd op 29/05/2014 13:00:06 door Frank Conijn
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.