JSFiddle - React, Tailwind, and code Playground

by rwurzer

HTML

<table name="kalender" class="kalender" id="mytable" width="100%" border="0" cellspacing="10">
    <tr>
        <td class="hiddenCell">&nbsp;</td>    
        <td class="hiddenCell" colspan="8">8</td>           
    </tr>                                      
    <tr>   
         <td>Uhrzeit</td>
         <td colspan="8" id="1440367200" class="rightBorder day">Montag, 24.08.2015</td>      
    </tr>
    <tr>
        <td class="uhrzeit">&nbsp;</td>
        <td width="120px" id="mitarbeiter_1">AnBi</td>
        <td width="120px" id="mitarbeiter_2">HeBi</td>
        <td width="120px" id="mitarbeiter_3">JuHa</td>
        <td width="120px" id="mitarbeiter_4">StRi</td>
        <td width="120px" id="mitarbeiter_5">FrWi</td>
        <td width="120px" id="mitarbeiter_7">EvSc</td>
        <td width="120px" id="mitarbeiter_8">JoAr</td>
        <td width="200px" class="rightBorder" id="mitarbeiter_10">GaHa</td>
    </tr>
    <tr>  
        <td id="21600" class="uhrzeit">7:00</td>
        <td rowspan="2" class="terminActiveDoppel" id="11"  title="Patient">1</td>
        <td class="termin droppable" id="nochKeinTermin" style="background:red;">2</td>
        <td class="termin droppable" id="nochKeinTermin">3</td>
        <td class="termin droppable" id="nochKeinTermin">4</td>
        <td class="termin droppable" id="nochKeinTermin">5</td>
        <td class="termin droppable" id="nochKeinTermin">6</td>
        <td class="termin droppable" id="nochKeinTermin">7</td>
        <td class="terminRightBorder droppable" id="nochKeinTermin">8</td>
    </tr>
    <tr>  
        <td id="21600" class="uhrzeit">7:00</td>
        <td class="termin droppable" id="nochKeinTermin" style="background:blue;">2</td>
        <td class="termin droppable" id="nochKeinTermin">3</td>
        <td class="termin droppable" id="nochKeinTermin">4</td>
        <td class="termin droppable" id="nochKeinTermin">5</td>
        <td class="termin droppable" id="nochKeinTermin">6</td>
        <td class="termin...

CSS

table {
    width:100%;
    border-collapse: collapse;
    font-size:13px;
}

th, td {
    border: 1px solid #F5F5F5;
    height:20px;
    font-size:12px;
    text-align:center;   
     
}

.termin {
    cursor:pointer;
    background:#FBFCF6;
}

JavaScript

$('td#nochKeinTermin').click(function(){
var myCol = $(this).closest("td").index();
var myRow = $(this).closest("tr").index();
alert('Row: ' + myRow + ', Column: ' + myCol);
});