Fechas Reservadas con Jquery

Ejemplo de Fechas Reservadas con Jquery en una tabla común

by Juan Muñoz

HTML

<table border="1" style="width:100%" id="tabla">
  <tr>
    <th>HORA</th>
    <th>Lunes</th>
    <th>Martes</th>
    <th>Miercoles</th>
    <th>Jueves</th>
    <th>Viernes</th>
    <th>Sábado</th>
    <th>Domingo</th>
  </tr>
  <tr>
    <td>09:00</td>
    <td id="09lun"></td>
    <td id="09mar"></td>
    <td id="09mie"></td>
    <td id="09jue"></td>
    <td id="09vie"></td>
    <td id="09sab"></td>
    <td id="09dom"></td>
  </tr>
  <tr>
    <td>09:30</td>
    <td id="093lun"></td>
    <td id="093mar"></td>
    <td id="093mie"></td>
    <td id="093jue"></td>
    <td id="093vie"></td>
    <td id="093sab"></td>
    <td id="093dom"></td>
  </tr>
  <tr>
    <td>10:00</td>
    <td id="10lun"></td>
    <td id="10mar"></td>
    <td id="10mie"></td>
    <td id="10jue"></td>
    <td id="10vie"></td>
    <td id="10sab"></td>
    <td id="10dom"></td>
  </tr>
</table>

CSS

.listo{
	background-color:#FF6E00;
  color:#fff;
  text-align:center;
}

JavaScript

$(document).ready(function(){

	veri();

});


function veri(){

//fechas reservadas
var ar = ["09lun","10lun","093mar","10mie"];

//iniciamos un contador
var con = 0;

//recorremos la tabla
$('#tabla tr').find('td').each(function (i, v) {

//asignamos a una variable la id de cada td de la tabla
var ref = ($('#tabla tr').find('td')[con].id);

	//verificamos si esa id esta en el array
	if( $.inArray(ref,ar) > -1 ){
  
		//Si lo esta, le asignamos una clase 	
    $("td[id="+ref+"]").addClass('listo');
    $("td[id="+ref+"]").html("Reservado");
  
  }

//incrementamos el contador
con = parseInt(con)+1;

});

  

}