JSFiddle - React, Tailwind, and code Playground

by beirensg

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 <title>Tijdblokken berekenen</title>
 

 
 <link href="../style.css" rel="stylesheet" type="text/css" />
 
 
 
 </head>
 
 <body>
 <form action="index.php" method="post" name="tijdsblokken" target="_self" >
 <table width="240" border="0" cellpadding="2" cellspacing="0"  class="admin_form">
   <tr>
     <td colspan="2" class="bold">Dag indeling</td>
   </tr>
   <tr>
     <td width="150">Start tijd: </td>
     <td width="82"><input name="start_time" type="text" value="08:00:00" size="10" maxlength="8" /></td>
   </tr>
   <tr>
     <td>Eind tijd: </td>
     <td><input name="end_time" type="text" value="17:00:00" size="10" maxlength="8" /></td>
   </tr>
   <tr>
     <td>Anntal min. per blok </td>
     <td><input name="lenght" type="text" value="15" size="10" maxlength="3" /></td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td>
       <div align="center">
         <input name="calculate" type="submit" value="submit" />
         </div></td>
   </tr>
 </table>
 
 
 
 </form>

 

    <form action="index.php" method="post"  target="_self" name="MyForm">
         
         <table  border="0" cellspacing="2" cellpadding="2">
                     <tr>
                         <td colspan="'.$col.'">Dag indeling</td>
                       </tr>

                        <tr id="row'.$current_row.'">
 
                            <td class="clickable checked" style="background-color:green">
                                                
                                                
         
                                                      
                                 
                                                 
                                               
                                                  ...

JavaScript

$('td.clickable').click(function(){
    if ($(this).hasClass('checked')){ //cel is aangeklikt, dus uitklikken
       $(this).css('background-color','red');
       $(this).children("input:checkbox").attr('checked', false);
    }
    else{ //cel is niet aangeklikt, dus aanklikken
       $(this).css('background-color','green');
       $(this).children("input:checkbox").attr('checked', true);
    }
    $(this).toggleClass('checked'); //zet de juiste klasse voor de cell
 });