1

tengo el siguiente codigo

$(document).on("click",".ytd",function(){
            if($(this).data("status")!=0){
                $(this).css("background","");
                $(this).data("status",0);
            }else{
                $(this).css("background","#ff0000");
                $(this).data("status",1);
            }
        });
        function cambiar(){
            var meses=["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Sep","Oct","Nov","Dic"]
            var fecha1 = moment($("#rango1").val());
            var fecha2 = moment($("#rango2").val());

            var html="<tr><td class='ytd' colspan='7'>&nbsp;</td></tr><tr>";
            j=0;
            for(;j<fecha1.day();j++){
                html+="<td></td>"
            }
            for(;fecha2.diff(fecha1,"days")>=0;j++){
                if(j%7==0){
                    html+="</tr><tr>";    
                }
                html+="<td class='ytd' data-status='0'>"+meses[fecha1.month()]+", "+fecha1.date()+"</td>"

                fecha1.add(1,"days");
            }
            for(;j%7!=0;j++){
                html+="<td></td>"
            }
            html+="</tr>";
            $("#tabla_turnos").html("");
            $("#tabla_turnos").append(html);   
        }
.ytable{
            border-spacing: 0;
            display: flex;/*Se ajuste dinamicamente al tamano del dispositivo**/
            max-height: 35vh; /*El alto que necesitemos**/
            overflow-y: auto; /**El scroll verticalmente cuando sea necesario*/
            overflow-x: hidden;/*Sin scroll horizontal*/
            table-layout: fixed;/**Forzamos a que las filas tenga el mismo ancho**/
            width: 99.9%; /*El ancho que necesitemos*/
            border:1px solid gray;
        }

        .ythead{
            background-color: #113F63;
            color:#fff;
            position: fixed !important;/*el thead va ser siempre estatico**/
        }


        .yth{
            border-bottom: 1px solid #c4c0c9;
            border-right: 1px solid #c4c0c9;
            max-width: 5.5vw;
            min-width: 5.5vw;
            text-align: center;
            font-weight: normal;
            margin: 0;
            word-wrap: break-word;/*Si el contenido supera el tamano, adiciona a una nueve linea**/
            font-size: 11px;
            height: 5.5vh !important;/*El mismo alto para todas las celdas**/
            padding: 4px;
            border-right: 1px solid #c4c0c9;
        }
        .ytd{
            font-weight: normal;
            margin: 0;
            max-width: 5.5vw;
            min-width: 5.5vw;
            word-wrap: break-word;/*Si el contenido supera el tamano, adiciona a una nueve linea**/
            font-size: 11px;
            height: 5.5vh !important;/*El mismo alto para todas las celdas**/
            padding: 4px;
            border-right: 1px solid #c4c0c9;
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<div class="row">
    <label class="col-md-4 col-sm-4 col-xs-12 control-label">Rang Ini:</label>
    <div class="col-md-8 col-sm-8 col-xs-12 form-group">
        <input type="date" class="form-control input-sm" name="rango1" id="rango1" value="2019-04-01">
    </div>
</div>
<div class="row">
    <label class="col-md-4 col-sm-4 col-xs-12 control-label">Ran Fin:</label>
    <div class="col-md-8 col-sm-8 col-xs-12 form-group">
        <input type="date" class="form-control input-sm" name="rango2" id="rango2" value="2019-04-30" >
    </div>
</div>
                                            
<button onclick="cambiar()">iniciar</button>
<table class="ytable">
    <thead class="ythead">
        <tr>
            <th class="yth" >Domingo</th>
            <th class="yth" >Lunes</th>
            <th class="yth" >Martes</th>
            <th class="yth" >Miercoles</th>
            <th class="yth" >Jueves</th>
            <th class="yth" >Viernes</th>
            <th class="yth" >Sabado</th>
        </tr>   
    </thead>
    <tbody id="tabla_turnos">
        <tr>
            <td class="ytd" colspan="7">&nbsp;</td>
        </tr>
    </tbody>
</table>

Como pueden ver el resultado(en pantalla completa se ve mejor), al hacer click se pinta la celda, pero lo que deseo es pintar mientras tengo presionado el botón izquierdo.

1 respuesta 1

3

puedes hacerlo con el evento mousedown

ejemplo:

// lo utilizamos para saber si se hizo click
var seleccion = false;
// utilizamos mousedown en vez de click
// razon: mousedown termina su ejecucion al soltar el click
// y podemos frenarla con mouseup
// mientras que click solo se ejecuta si porque si

$("tbody").on("mousedown",".ytd",function(){
// cambiamos la seleccion a true
seleccion = true;
      //  aplicamos el estilo
      if($(this).data("status")!=0){
           $(this).css("background","");
           $(this).data("status",0);
     }else{
           $(this).css("background","#ff0000");
           $(this).data("status",1);
      }
      // evita la selecion del texto u otro elemento
      return false;
})

// mouseup se ejecuta cuando se suelta el click
$('tbody').on("mouseup",function () {
    // cambiamos seleccion a false
    seleccion = false;
});

// mouseover se ejecuta sobre el elemento donde este el mouse
$("tbody").on("mouseover",".ytd",function () {
// validamos si se a dado un mousedown previamente "click sin soltar"
  if (seleccion) {
  // aplicamos el estilo
      if($(this).data("status")!=0){
           $(this).css("background","");
           $(this).data("status",0);
     }else{
           $(this).css("background","#ff0000");
           $(this).data("status",1);
      }
  }
});


        function cambiar(){
            var meses=["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Sep","Oct","Nov","Dic"]
            var fecha1 = moment($("#rango1").val());
            var fecha2 = moment($("#rango2").val());

            var html="<tr><td class='ytd' colspan='7'>&nbsp;</td></tr><tr>";
            j=0;
            for(;j<fecha1.day();j++){
                html+="<td></td>"
            }
            for(;fecha2.diff(fecha1,"days")>=0;j++){
                if(j%7==0){
                    html+="</tr><tr>";    
                }
                html+="<td class='ytd' data-status='0'>"+meses[fecha1.month()]+", "+fecha1.date()+"</td>"

                fecha1.add(1,"days");
            }
            for(;j%7!=0;j++){
                html+="<td></td>"
            }
            html+="</tr>";
            $("#tabla_turnos").html("");
            $("#tabla_turnos").append(html);   
        }
.ytable{
            border-spacing: 0;
            display: flex;/*Se ajuste dinamicamente al tamano del dispositivo**/
            max-height: 35vh; /*El alto que necesitemos**/
            overflow-y: auto; /**El scroll verticalmente cuando sea necesario*/
            overflow-x: hidden;/*Sin scroll horizontal*/
            table-layout: fixed;/**Forzamos a que las filas tenga el mismo ancho**/
            width: 99.9%; /*El ancho que necesitemos*/
            border:1px solid gray;
        }

        .ythead{
            background-color: #113F63;
            color:#fff;
            position: fixed !important;/*el thead va ser siempre estatico**/
        }


        .yth{
            border-bottom: 1px solid #c4c0c9;
            border-right: 1px solid #c4c0c9;
            max-width: 5.5vw;
            min-width: 5.5vw;
            text-align: center;
            font-weight: normal;
            margin: 0;
            word-wrap: break-word;/*Si el contenido supera el tamano, adiciona a una nueve linea**/
            font-size: 11px;
            height: 5.5vh !important;/*El mismo alto para todas las celdas**/
            padding: 4px;
            border-right: 1px solid #c4c0c9;
        }
        .ytd{
            font-weight: normal;
            margin: 0;
            max-width: 5.5vw;
            min-width: 5.5vw;
            word-wrap: break-word;/*Si el contenido supera el tamano, adiciona a una nueve linea**/
            font-size: 11px;
            height: 5.5vh !important;/*El mismo alto para todas las celdas**/
            padding: 4px;
            border-right: 1px solid #c4c0c9;
        }
        
.seleccion{

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<div class="row">
    <label class="col-md-4 col-sm-4 col-xs-12 control-label">Rang Ini:</label>
    <div class="col-md-8 col-sm-8 col-xs-12 form-group">
        <input type="date" class="form-control input-sm" name="rango1" id="rango1" value="2019-04-01">
    </div>
</div>
<div class="row">
    <label class="col-md-4 col-sm-4 col-xs-12 control-label">Ran Fin:</label>
    <div class="col-md-8 col-sm-8 col-xs-12 form-group">
        <input type="date" class="form-control input-sm" name="rango2" id="rango2" value="2019-04-30" >
    </div>
</div>
                                            
<button onclick="cambiar()">iniciar</button>
<table class="ytable">
    <thead class="ythead">
        <tr>
            <th class="yth" >Domingo</th>
            <th class="yth" >Lunes</th>
            <th class="yth" >Martes</th>
            <th class="yth" >Miercoles</th>
            <th class="yth" >Jueves</th>
            <th class="yth" >Viernes</th>
            <th class="yth" >Sabado</th>
        </tr>   
    </thead>
    <tbody id="tabla_turnos">
        <tr>
            <td class="ytd" colspan="7">&nbsp;</td>
        </tr>
    </tbody>
</table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.