[opgelost] HTML/javascript: rows verbergen in tabel

MKe

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

Code: [Selecteer]

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

Meld dit bericht aan de moderator

Gelogd

Mijn blokkendoos blog: http://mke21.wordpress.com/

bram103

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

Meld dit bericht aan de moderator

Gelogd

Ronnie

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

Code: [Selecteer]

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

Meld dit bericht aan de moderator

Gelogd

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