Nieuws:

We zijn er weer.

Na lange tijd van afwezigheid zijn we er weer  :laugh:
We hebben alle wachtwoorden gereset, je oude wachtwoord werkt niet meer.Je moet via het "wachtwoord vergeten"-linkje je wachtwoord resetten. Je krijgt hiervoor een mailtje op het adres dat je bij ons geregistreerd hebt.

De komende tijd zijn we nog druk bezig om de rest van de site op te bouwen, dus het kan zijn dat sommige onderdelen (tijdelijk) niet werken.

Welkom, Gast. Alsjeblieft inloggen of registreren.
Heb je de activerings-mail niet ontvangen?

Auteur Topic: [opgelost] HTML/javascript: rows verbergen in tabel  (gelezen 2076 keer)

Offline MKe

  • Lid
  • Steunpunt: Nee
[opgelost] HTML/javascript: rows verbergen in tabel
« Gepost op: 2010/09/29, 08:18:48 »
Hoi,

Ik probeer een tabel te maken waarbij je bepaalde rijen kunt laten in-en uitklappen. Op zich lukt dit prima. Maar ik wil ook graag met 1 klik alle betreffende rijen in een keer inklappen, waarbij de tussenliggende rijen blijven staan. Dit lukt mij niet. Ik heb een functie gemaakt (hide all) die dit zou moeten doen (zoekt naar elementen van het type tbody) maar als ik deze uitvoer verdwijnt de hele tabel en dat is niet de bedoeling. Weet iemand wat ik fout doe?
<html>
<head>
<script language="Javascript" type="text/javascript">
<!--
    function show_hide(tblid, show)
    {
        if (tbl = document.getElementById(tblid)) {
            if (null == show) show = tbl.style.display == 'none';
            tbl.style.display = (show ? '' : 'none');
        }
    }

    function hideall()
       {
              locl = document.getElementsByTagName('tbody');
              for (i=0;i<locl.length;i++)
              {
                 locl[i].style.display='none';
              }
       }
//!-->
</script>
</head>
<body>
        <a href="javascript:void();" onclick="hideall()">Hide all</a>
    <table>
        <tr><td><a href="javascript:void();" onclick="show_hide('1')"> + </a></td><td>A</td><td>A</td></tr>
        <tbody id="1"><tr><td colspan="3">bladiebla</td></tr></tbody>
        <tr><td><a href="javascript:void();" onclick="show_hide('2')"> + </a></td><td>A</td><td>A</td></tr>
        <tbody id="2"><tr><td colspan="3">bladiebla</td></tr></tbody>
        <tr><td><a href="javascript:void();" onclick="show_hide('3')"> + </a></td><td>A</td><td>A</td></tr>
        <tbody id="3"><tr><td colspan="3">bladiebla</td></tr></tbody>
    </table>
</body>
</html>
« Laatst bewerkt op: 2010/09/30, 11:23:06 door MKe »
Mijn blokkendoos blog: http://mke21.wordpress.com/

Offline bram103

  • Lid
  • Steunpunt: Nee
Re: HTML/javascript: rows verbergen in tabel
« Reactie #1 Gepost op: 2010/09/29, 19:08:32 »
Als je in de hideall function net boven de for loop alert(locl.length); invoegd zul je zien dat het resultaat 6 is.

Ik vermoed dat de rijen die je niet met tbody omsloten hebt toch als tbody behandeld worden.

Er zijn hier natuurlijk tal van oplossingen voor te bedenken maar ik tip je om eens naar JQuery (http://jquery.com) te kijken daarmee maak je dit soort dingen in een handomdraai en heb je ook niet de ergernis dat het met de ene browser wel goed werkt maar met een andere niet.

Gr,
Bram

Offline Ronnie

  • Artworkteam
    • ronnie.vd.c
  • Steunpunt: Nee
Re: HTML/javascript: rows verbergen in tabel
« Reactie #2 Gepost op: 2010/09/29, 23:34:58 »
Ik heb de HTML even door een validator gehaald en deze geeft een heel aantal errors: http://validator.w3.org/#validate_by_input

Eentje daarvan is dat <tr> persé in een <tbody> moet staat. Dus als een browser een losse <tr> in een table tegenkomt, kan deze er automatisch een <tbody> omheen plaatsen. Dat veroorzaakt waarschijnlijk je probleem.

jQuery, wat bram103 aanhaalt is een erg gemakkelijke tool om dit voor elkaar te krijgen. Ik zal zo eens een opzetje maken en deze hier posten. Heb geduld intussen

EDIT: hier dus de code

<!DOCTYPE html>

<html>
    <head>
    <!-- The title of the page -->
<title>Titel van de Website</title>   

<!-- Charset is needed for valid HTML -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- Some meta data to be better findable by search engines -->
<meta name="description" content="" />
<meta name="keywords" content="" />

<!-- The url to the favicon. favicon must be in the root for IE browsers -->
<!--<link rel="shortcut icon" href="favicon.ico" />-->

<!-- Link to custom css file -->
<!--<link rel="stylesheet" type="text/css" media="all" href="style/style.css" />-->

<!-- Inline CSS -->
<style type="text/css">
.hide_all,
.show_all,
.collapse { cursor: pointer; color: blue; text-decoration: underline; }
</style>

<!-- Link to external jQuery library, so your site has less traffic and users can cache this link for multiple websites -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- Some inline javascript, which is the own written code, this may be in a separate .js file too -->
<!-- Between the script tags //<![CDATA[....]]> is needed so the browsers do not parse this code as HTML -->
<script type="text/javascript">
//<![CDATA[
// document ready is executed when the browser DOM is ready and can be manipulated
$(document).ready(function(){
// This function is executed when an object with the class collapse is clicked
$('.collapse').click(function(){
// This is the item that is clicked on, the first parent is the td, the second parent is the tr,
//     the next('.hide') is the next item with class hide. Toggle means if visible, then hide, else show
// There are more (and even better ways to do this, but for now it will do the job
$(this).parent().parent().next('.hide').toggle();
});

$('.hide_all').click(function(){
// Hides all the html elements with the class 'hide'
$('.hide').hide();
});

$('.show_all').click(function(){
// Shows all the html elements with the class 'hide'
$('.hide').show();
});
});
//]]>
</script>
</head>
<body>
<div><span class="hide_all">Hide all</span> / <span class="show_all">Show all</span></div>
<table>
<thead></thead>
<tfoot></tfoot>
<tbody>
<tr><td><span class="collapse"> + </span></td><td>A</td><td>A</td>
<tr class="hide"><td colspan="3">bladiebla</td></tr>
<tr><td><span class="collapse"> + </span></td><td>A</td><td>A</td>
<tr class="hide"><td colspan="3">bladiebla</td></tr>
<tr><td><span class="collapse"> + </span></td><td>A</td><td>A</td>
<tr class="hide"><td colspan="3">bladiebla</td></tr>
</tbody>
</table>
</body>
</html>

Ik heb de code goed voorzien van commentaar. Deze pagina is Valid volgens W3C en zou in elke browser hetzelfde moeten werken. Documentatie over jQuery kun je hier vinden: http://docs.jquery.com/
« Laatst bewerkt op: 2010/09/30, 00:15:09 door Ronnie »
Ben je ook blij dat Ubuntu zo toegankelijk en gratis is, en wil je graag net als ik iets terugdoen, kijk dan eens rond bij mwanzo, dé poort naar het bijdragen aan Ubuntu en haar gemeenschap!

Documentatie Terminal

Offline MKe

  • Lid
  • Steunpunt: Nee
Re: HTML/javascript: rows verbergen in tabel
« Reactie #3 Gepost op: 2010/09/30, 11:22:53 »
Bedankt en werkt geweldig!