login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Tabelcel onclick- cel krijgt andere kleur en checkbox aangepast (Opgelost)

Offline Hebus - 22/02/2011 10:11
Avatar van HebusNieuw lid Ik ben in leek wat javscript betreft ,
en ik ben zoek naar een script dat bij een onclick van een tabel cel de background-color aangepast wordt en de checkbox in die cel aangevinkt wordt.

Ik heb al veel scripts gevonden die werken op row niveau maar ik heb het nodig in cel niveau.

Of beter nog, als dat kan de, tabel cel als checkbox laten werken zodat de checkbox niet te zien is.

12 antwoorden

Gesponsorde links
Offline Beirensg - 22/02/2011 10:30
Avatar van Beirensg HTML beginner JQuery is hetgeen wat je zoekt:

bvb:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2. <tr id="row1">
  3. <td class="clickable" style="background-color:red">click here</td>
  4. </tr>


en via jquery

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $('td.clickable').click(function(){
  2.    if ($(this).hasClass('checked')){ //cel is aangeklikt, dus uitklikken
  3.       $(this).css('background-color','red');
  4.    }
  5.    else{ //cel is niet aangeklikt, dus aanklikken
  6.       $(this).css('background-color','green');
  7.    }
  8.    $(this).toggleClass('checked'); //zet de juiste klasse voor de cell
  9. });


Dit zou moeten werken (natuurlijk moet je jquery inladen op de pagina). Nu heb je geen checkbox, maar een cel die verandert van kleur indien aangeklikt. De checkbox wordt vervangen door het al of niet aanwezig zijn van de klasse checked.
Bedankt door: Hebus
Offline Hebus - 22/02/2011 10:39
Avatar van Hebus Nieuw lid Bedankt alvast, maar hoe zie ik nu de stand van die cel , ik wil deze nl. nadien uitlezen na een submit om de eventueel aangeklikte cellen in een db te steken.
De tabel zit dus in een form.

Ben ondertuss. aan het kijken of ik het niet kan oplossen met <label>
Offline Beirensg - 22/02/2011 10:52 (laatste wijziging 22/02/2011 10:52)
Avatar van Beirensg HTML beginner Dan kan je daar een hidden en disabled checkbox insteken
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2. <tr id="row1">
  3. <td class="clickable" style="background-color:red">
  4. <input id="test" type=checkbox name="test" value="1" disabled style="display:none" />
  5. click here</td>
  6. </tr>


en de jquery
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $('td.clickable').click(function(){
  2.    if ($(this).hasClass('checked')){ //cel is aangeklikt, dus uitklikken
  3.       $(this).css('background-color','red');
  4.       $(this).children("input:checkbox").attr('checked', false);
  5.    }
  6.    else{ //cel is niet aangeklikt, dus aanklikken
  7.       $(this).css('background-color','green');
  8.       $(this).children("input:checkbox").attr('checked', true);
  9.    }
  10.    $(this).toggleClass('checked'); //zet de juiste klasse voor de cell
  11. });


De checkbox is niet echt nodig, indien je voor de submit nog een kleine verwerking van de gegevens doet (bvb controle invoervelden). Tijdens deze controle zou je in principe ook de waarde van de cel kunnen meesturen indien nodig.
Bedankt door: Hebus
Offline Hebus - 22/02/2011 11:39 (laatste wijziging 22/02/2011 11:40)
Avatar van Hebus Nieuw lid Ik heb heb je script proberen integreren, maar blijkbaar doe ik nog iets fout
(zal wel weer iets heel dom zijn  )
php code - Bekijk de code zonder highlighting - Klap code in 
  1. echo'<form action="index.php" method="post"  target="_self" name="MyForm">';
  2.  
  3. 	echo '<table  border="0" cellspacing="2" cellpadding="2">
  4. 		<tr>
  5. 			<td colspan="'.$col.'">Dag indeling</td>
  6. 		 </tr>';
  7.  
  8. 		while($current_row <=$max_rows)/*controle op welke rij we zitten in tabel*/
  9. 			{
  10. 			 echo'<tr id="row'.$current_row.'">';
  11.  
  12. 			 while ($current_col<=$col)/*controle in welke kollom we zitten*/
  13. 			   {
  14. 				echo'<td class="clickable" style="background-color:green">';
  15. 				/*Bepalen van start en eindtijd in huidige blok*/
  16. 				$block_start=( ((($current_col-'1')*$max_rows)*$block_duration)+((($current_row-1)*$block_duration)+$start));
  17. 				$block_end=$block_start + $block_duration;
  18.  
  19. 				/*bepalen van array pointer nr*/		
  20. 				$i=( (($current_col-'1')*$max_rows)+($current_row-1) );									
  21.  
  22. 				if ($block_end <= $end)/*enkel geg. tonen als blocken niet groter is dan opgegeven*/
  23. 				   {
  25. 	                    '<input name="start['.$i.']" type="hidden" value="'.sec2hms($block_start).'" />
  26. 						<input name="end['.$i.']" type="hidden" value="'.sec2hms($block_end).'" />
  27. 						'.sec2hms($block_start).'-'.sec2hms($block_end).'
  28. 						<input name="beschikbaar['.$i.']" type="checkbox"  id="'.$i.'" value="1"  checked/>'
  29. 						;
  30. 					}
  31.  
  32. 				echo'</td>';										
  33. 				$current_col ++;	/*overschakelen naar volgende kolom dus col. positie +1*/
  34. 				}
  35.  
  36. 			$current_col ='1';	/*terug naar eerste kolom */
  37. 			echo'</tr>';/*huidige rij afsluiten*/
  38. 			$current_row ++;/* naar volgende rijd gan dus rij pos. +1*/
  39. 		}
  40.   echo '</table>';
  41. echo '</form>';
Offline Beirensg - 22/02/2011 11:47
Avatar van Beirensg HTML beginner welke foutmelding geeft hij. Is er een fout in php? Of loopt iets anders mis?

Zijn bvb alle variabelen ($max_rows, $current_row,...) goed geinitialiseerd?
Offline Hebus - 22/02/2011 11:57
Avatar van Hebus Nieuw lid Geen foutmelding , mijn script werkt nog steeds , enkel reageert hij niet op een klik op een cel.
Heb het ondertuss. nog eens nagekeken, en nog niks gezien.

op lijn 10 start de row
op lijn 14 de <td class="clickable" style="background-color:green">
(de cellen staan standaard geselecteerd)
en op 28 staat de checkbox
(moet id en name daar hetzelfde zijn?)
Offline Beirensg - 22/02/2011 12:04 (laatste wijziging 22/02/2011 12:05)
Avatar van Beirensg HTML beginner Maar heb je de javascript toegevoegd. Je zal onderaan de pagina iets in de volgende trend moeten zetten:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script src="jquery.js"></script>
  2. <script language='javascript'>
  3. $('td.clickable').click(function(){
  4.    if ($(this).hasClass('checked')){ //cel is aangeklikt, dus uitklikken
  5.       $(this).css('background-color','red');
  6.       $(this).children("input:checkbox").attr('checked', false);
  7.    }
  8.    else{ //cel is niet aangeklikt, dus aanklikken
  9.       $(this).css('background-color','green');
  10.       $(this).children("input:checkbox").attr('checked', true);
  11.    }
  12.    $(this).toggleClass('checked'); //zet de juiste klasse voor de cell
  13. });
  14. </script>


waarbij je jquery.js hebt gedownload en in je root van je site plaatsen.
Bedankt door: Hebus
Offline Hebus - 22/02/2011 12:11
Avatar van Hebus Nieuw lid Ja hoor.
Hier is de complete pagina
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  5. <title>Tijdblokken berekenen</title>
  6.  
  7. <?php
  8. include 'functions.php';
  9.  
  10. /*Start instelling van variabele*/
  11. $block_end='0'; /*Einde van tijdsblok staat op 0 als start*/
  12. $current_col='1';	/*start nr van eerste kollom.*/
  13. $current_row='1'; /* Start nr van eerste rij*/
  14. $max_rows='20';/*Max aantal tijdsblokken onder elkaar.*/
  15.  
  16. ?>
  17.  
  18. <link href="../style.css" rel="stylesheet" type="text/css" />
  19.  
  20. <script src="jquery15.js"></script>
  21.  
  22. <script language='javascript'>
  23. $('td.clickable').click(function(){
  24.    if ($(this).hasClass('checked')){ //cel is aangeklikt, dus uitklikken
  25.       $(this).css('background-color','red');
  26.       $(this).children("input:checkbox").attr('checked', false);
  27.    }
  28.    else{ //cel is niet aangeklikt, dus aanklikken
  29.       $(this).css('background-color','green');
  30.       $(this).children("input:checkbox").attr('checked', true);
  31.    }
  32.    $(this).toggleClass('checked'); //zet de juiste klasse voor de cell
  33. });
  34. </script>
  35.  
  36.  
  37. </head>
  38.  
  39. <body>
  40. <form action="index.php" method="post" name="tijdsblokken" target="_self" >
  41. <table width="240" border="0" cellpadding="2" cellspacing="0"  class="admin_form">
  42.   <tr>
  43.     <td colspan="2" class="bold">Dag indeling</td>
  44.   </tr>
  45.   <tr>
  46.     <td width="150">Start tijd: </td>
  47.     <td width="82"><input name="start_time" type="text" value="08:00:00" size="10" maxlength="8" /></td>
  48.   </tr>
  49.   <tr>
  50.     <td>Eind tijd: </td>
  51.     <td><input name="end_time" type="text" value="17:00:00" size="10" maxlength="8" /></td>
  52.   </tr>
  53.   <tr>
  54.     <td>Anntal min. per blok </td>
  55.     <td><input name="lenght" type="text" value="15" size="10" maxlength="3" /></td>
  56.   </tr>
  57.   <tr>
  58.     <td>&nbsp;</td>
  59.     <td>
  60.       <div align="center">
  61.         <input name="calculate" type="submit" value="submit" />
  62.         </div></td>
  63.   </tr>
  64. </table>
  65.  
  66.  
  67.  
  68. </form>
  69.  
  70. <?php
  71.  
  72. //lijst van tijdsblokken tonen.
  73.  
  74. if (isset($_POST['calculate']) )
  75. 	{
  76. 	$start = time2sec ($_POST['start_time']);	
  77. 	$end = time2sec($_POST['end_time']);	
  78. 	$block_duration = $_POST['lenght'] * 60;
  79.  
  80. 	/*kijken of er met meeder kolommen moet worden gewerkt*/
  81. 	$time_parts=($end-$start)/$block_duration;
  82.  
  83. 	if ($time_parts > $max_rows)
  84. 		$col= ceil($time_parts / $max_rows);
  85. 	else $col='1';
  86.  
  87.  
  88. 	/*weergeven van dag indeling*/
  89. 	echo'<form action="index.php" method="post"  target="_self" name="MyForm">';
  90.  
  91. 		echo '<table  border="0" cellspacing="2" cellpadding="2">
  92. 					<tr>
  93. 						<td colspan="'.$col.'">Dag indeling</td>
  94. 		  			</tr>';
  95.  
  96.  
  97. 					while($current_row <=$max_rows)/*controle op welke rij we zitten in tabel*/
  98. 						{
  99. 						echo'<tr id="row'.$current_row.'">';
  100.  
  101. 							while ($current_col<=$col)/*controle in welke kollom we zitten*/
  102. 								{
  103. 										echo'<td class="clickable" style="background-color:green">';
  104. 												/*Bepalen van start en eindtijd in huidige blok*/
  105. 												$block_start=( ((($current_col-'1')*$max_rows)*$block_duration)+((($current_row-'1')*$block_duration)+$start));
  106. 												$block_end=$block_start + $block_duration;
  107.  
  108. 												/*bepalen van array pointer nr*/		
  109. 												$i=( (($current_col-'1')*$max_rows)+($current_row-'1') );									
  110.  
  111. 												if ($block_end <= $end)/*enkel geg. tonen als blocken niet groter is dan opgegeven*/
  112. 													{
  114. 															'<input name="start['.$i.']" type="hidden" value="'.sec2hms($block_start).'" />
  115. 															<input name="end['.$i.']" type="hidden" value="'.sec2hms($block_end).'" />
  116. 															'.sec2hms($block_start).'-'.sec2hms($block_end).'
  117. 															<input name="beschikbaar['.$i.']" type="checkbox"  id="'.$i.'" value="1"  checked/>'
  118. 															;
  119. 													}
  120.  
  121. 										echo'</td>';										
  122. 									$current_col ++;	/*overschakelen naar volgende kolom dus col. positie +1*/
  123. 								}
  124.  
  125. 						$current_col ='1';	/*terug naar eerste kolom */
  126. 						echo'</tr>';/*huidige rij afsluiten*/
  127. 						$current_row ++;/* naar volgende rijd gan dus rij pos. +1*/
  128. 						}
  129.  
  130. 		echo '</table>';
  131. 	echo '</form>';
  132.  
  133. 	}
  134. ?>
  135. </body>
  136. </html>
Offline Beirensg - 22/02/2011 14:07
Avatar van Beirensg HTML beginner probeer eens met volgende functie:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $('td.clickable').live('click',function(){
  2.    if ($(this).hasClass('checked')){ //cel is aangeklikt, dus uitklikken
  3.       $(this).css('background-color','red');
  4.       $(this).children("input:checkbox").attr('checked', false);
  5.    }
  6.    else{ //cel is niet aangeklikt, dus aanklikken
  7.       $(this).css('background-color','green');
  8.       $(this).children("input:checkbox").attr('checked', true);
  9.    }
  10.    $(this).toggleClass('checked'); //zet de juiste klasse voor de cell
  11. });


Ik heb je code eens getest mbv jsfiddle (geen php mogelijk), en daar werkt de javascript: http://jsfiddle.net/beirensg/gA38E/
Bedankt door: Hebus
Offline Hebus - 22/02/2011 15:12 (laatste wijziging 22/02/2011 15:27)
Avatar van Hebus Nieuw lid Het blijkt te werken , maar ik moet de eerste keer 2x klikken op de cel voor er iets wordt aangepast nadien moet je maar één keer klikken op diezelfde cel om het te laten switchen.

http://jsfiddle.net/beirensg/gA38E/


het werkt dus bijna 

bedankt al voor de fantastische hulp tot hier toe 

oplossing:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <form action="index.php" method="post"  target="_self" name="MyForm">
  2.  
  3.          <table  border="0" cellspacing="2" cellpadding="2">
  4.                      <tr>
  5.                          <td colspan="'.$col.'">Dag indeling</td>
  6.                        </tr>
  7.  
  8.                         <tr id="row'.$current_row.'">
  9.  
  10.                             <td class="clickable checked" style="background-color:green">
  11.  
  12.  
  13.  
  14.  
  15.  
  16.  
  17.  
  18.                                                              <input name="start['.$i.']" type="hidden" value="sec2hms($block_start)" />
  19.                                                              <input name="end['.$i.']" type="hidden" value="sec2hms($block_end)" />
  20.  
  21.                                                              <input name="beschikbaar['.$i.']" type="checkbox"  id="'.$i.'" value="1"  checked/>
  22.  
  23.  
  24.                                       </td>                                    </tr></table>
  25.      </form>


javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $('td.clickable').click(function(){
  2.     if ($(this).hasClass('checked')){ //cel is aangeklikt, dus uitklikken
  3.        $(this).css('background-color','red');
  4.        $(this).children("input:checkbox").attr('checked', false);
  5.     }
  6.     else{ //cel is niet aangeklikt, dus aanklikken
  7.        $(this).css('background-color','green');
  8.        $(this).children("input:checkbox").attr('checked', true);
  9.     }
  10.     $(this).toggleClass('checked'); //zet de juiste klasse voor de cell
  11.  });
Offline Beirensg - 22/02/2011 15:15
Avatar van Beirensg HTML beginner IK heb een beetje verder gekeken, je moet twee keer klikken omdat de cel niet de class checked heeft. maar wel in het groen staat.

Je zet best de cel direct in de class checked vanaf het begin. Op JSfiddle staat nu de correcte versie.

Geen probleem 
Bedankt door: Hebus
Offline Hebus - 22/02/2011 15:25 (laatste wijziging 22/02/2011 15:28)
Avatar van Hebus Nieuw lid Yipie het werkt ik die td class al eens proberen aanpassen maar had toen clickable weg gedaan.
Hartelijk bedankt, ik kan nu verder gaan prutsen.
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $('td.clickable').click(function(){
  2.     if ($(this).hasClass('checked')){ //cel is aangeklikt, dus uitklikken
  3.        $(this).css('background-color','red');
  4.        $(this).children("input:checkbox").attr('checked', false);
  5.     }
  6.     else{ //cel is niet aangeklikt, dus aanklikken
  7.        $(this).css('background-color','green');
  8.        $(this).children("input:checkbox").attr('checked', true);
  9.     }
  10.     $(this).toggleClass('checked'); //zet de juiste klasse voor de cell
  11.  });


php code - Bekijk de code zonder highlighting - Klap code in 
  1. <form action="index.php" method="post"  target="_self" name="MyForm">
  2.  
  3.          <table  border="0" cellspacing="2" cellpadding="2">
  4.                      <tr>
  5.                          <td colspan="'.$col.'">Dag indeling</td>
  6.                        </tr>
  7.  
  8.                         <tr id="row'.$current_row.'">
  9.  
  10.                             <td class="clickable checked" style="background-color:green">
  11.  
  12.  
  13.  
  14.  
  15.  
  16.  
  17.  
  18.                                                              <input name="start['.$i.']" type="hidden" value="sec2hms($block_start)" />
  19.                                                              <input name="end['.$i.']" type="hidden" value="sec2hms($block_end)" />
  20.  
  21.                                                              <input name="beschikbaar['.$i.']" type="checkbox"  id="'.$i.'" value="1"  checked/>
  22.  
  23.  
  24.                                       </td>                                    </tr></table>
  25.      </form>
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.25s