Place a div into a table
I have this piece of code making a horizontal scheduler with a table.
I want to place my div with USER 1 label into this table in order to
simulate a booking slot.
I would to make it draggable into table lines/rows.
Do you have any clue ?
JsFiddle is http://jsfiddle.net/K8tTw/
Thanks.
<table width="100%" class="table table-nomargin">
<tr>
<th> </th>
<th colspan="21" class="monthSeparation">Août 2014</th>
<th colspan="10" class="monthSeparation">Septembre 2013</th>
</tr>
<tr>
<th> <select style="width:100%;">
<option>Toutes</option>
<option>Simple</option>
<option>Double</option>
<option>Triple</option>
</select>
</th>
<td class="monthSeparation">11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td class="weekEndBgColor">15</td>
<td class="weekEndBgColor">16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td class="weekEndBgColor">22</td>
<td class="weekEndBgColor">23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td class="weekEndBgColor">29</td>
<td class="weekEndBgColor">30</td>
<td>31</td>
<td class="monthSeparation">01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td class="weekEndBgColor">05</td>
<td class="weekEndBgColor">06</td>
<td>07</td>
<td>08</td>
<td>09</td>
</tr>
<tr>
<th>Chambre 01</th>
<td class="monthSeparation"> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="weekEndBgColor"> </td>
<td colspan="2" class="weekEndBgColor"><div class="booking
notValidated" rel="tooltip" title="USER 1">USER 1</div></td>
<td> </td>
<td> </td>
<td> </td>
<td><div class="booking Validated" rel="tooltip" title="USER 2">USER
2</div></td>
<td class="weekEndBgColor"> </td>
<td class="weekEndBgColor"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="weekEndBgColor"> </td>
<td class="weekEndBgColor"> </td>
<td> </td>
<td class="monthSeparation"> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="weekEndBgColor"> </td>
<td class="weekEndBgColor"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>Chambre 02</th>
<td class="monthSeparation"> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="weekEndBgColor"> </td>
<td class="weekEndBgColor"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="weekEndBgColor"> </td>
<td class="weekEndBgColor"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="weekEndBgColor"> </td>
<td class="weekEndBgColor"> </td>
<td> </td>
<td class="monthSeparation"> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="weekEndBgColor"> </td>
<td class="weekEndBgColor"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>Chambre 03</th>
<td class="monthSeparation"> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="weekEndBgColor"> </td>
<td class="weekEndBgColor"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="weekEndBgColor"> </td>
<td class="weekEndBgColor"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="weekEndBgColor"> </td>
<td class="weekEndBgColor"> </td>
<td> </td>
<td class="monthSeparation"> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="weekEndBgColor"> </td>
<td class="weekEndBgColor"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>Chambre 04</th>
<td class="monthSeparation"> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="weekEndBgColor"> </td>
<td class="weekEndBgColor"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="weekEndBgColor"> </td>
<td class="weekEndBgColor"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="weekEndBgColor"> </td>
<td class="weekEndBgColor"> </td>
<td> </td>
<td class="monthSeparation"> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="weekEndBgColor"> </td>
<td class="weekEndBgColor"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
No comments:
Post a Comment