En un proyecto de django, estoy tratando de hacer una tabla con celdas que se vuelven rojas cuando el usuario hace clic en ella.

Aquí está mi plantilla:

<table id="this_week" width=88%>
    <tr id = "days">
        <th><p>Horaire</p></th>
        <th><p>lun.</p></th>
        <th><p>Mar.</p></th>
        <th><p>Mer.</p></th>
        <th><p>Jeu.</p></th>
        <th><p>Ven.</p></th>
        <th><p>Sam.</p></th>
        <th><p>Dim.</p></th>
    </tr>
    {% with hours="9h 9h30 10h 10h30 11h 11h30 12h 12h30 13h 13h30 14h 14h30 15h 15h30 16h 16h30 17h 17h30 18h 18h30 19h 19h30 20h 20h30 21h" %}
    {% for i in hours.split %}
        <tr id= "{{ i }}">
            <th><p>{{ i }}</p></th>
            <th id="{{ i }} lun" class="available" onclick='deliveryBooking()'></th>
            <th id="{{ i }} mar" class="available" onclick='deliveryBooking()'></th>
            <th id="{{ i }} mer" class="available" onclick='deliveryBooking()'></th>
            <th id="{{ i }} jeu" class="available" onclick='deliveryBooking()'></th>
            <th id="{{ i }} ven" class="available" onclick='deliveryBooking()'></th>
            <th id="{{ i }} sam" class="available" onclick='deliveryBooking()'></th>
            <th id="{{ i }} dim" class="available" onclick='deliveryBooking()'></th>
        </tr>
    {% endfor %}
    {% endwith %}
</table>
<script>
function deliveryBooking()
{
    if ($(this).hasClass('available')) {
        $(this).removeClass('available');
        $(this).addClass('unavailable');
        console.log($(this));
    };
};
</script>

Pero ese script no hace nada, incluso en el registro de la consola no aparece nada. Luego intenté eliminar el atributo "onclick" en las celdas e importé un archivo js con este código (probé las siguientes funciones una tras otra) sin obtener más resultados:

$(document).ready(function() {

$("#this_week").children().find('.available').click(function(event){
    $(event.target).removeClass("available").addClass("unavailable");
    console.log($(event.target));
});

$("#this_week").children().find('.available').click(function(){
    $(this).removeClass("available").addClass("unavailable");
    console.log($(this));
});

});

También intenté eliminar la parte "children ()" y otros pequeños cambios, pero no sé qué probar a continuación. ¿Alguna idea sobre lo que estoy haciendo mal?

1
AlexMdg 10 sep. 2018 a las 12:10

3 respuestas

La mejor respuesta

Aquí está el método más simple.

Todo lo que hice fue eliminar el onclick y agregar

$(".available").on("click",function() { 
  $(this).toggleClass("available unavailable"); 
});

La creación de la tabla es irrelevante, uso jQuery aquí simplemente para crear las celdas para el ejemplo

$.each("9h 9h30 10h 10h30 11h 11h30 12h 12h30 13h 13h30 14h 14h30 15h 15h30 16h 16h30 17h 17h30 18h 18h30 19h 19h30 20h 20h30 21h".split(" "),function(i,hour) {

        $("#hours").append(`<tr><th><p>${hour}</p></th>
            <th id="${i}lun" class="available"></th>
            <th id="${i}mar" class="available"></th>
            <th id="${i}mer" class="available"></th>
            <th id="${i}jeu" class="available"></th>
            <th id="${i}ven" class="available"></th>
            <th id="${i}sam" class="available"></th>
            <th id="${i}dim" class="available"></th></tr>`);
})
$(".available").on("click",function() { 
  $(this).toggleClass("available unavailable"); 
});
.available { background-color:green }
.unavailable { background-color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="this_week" width=88%>
    <tr id="days">
        <th><p>Horaire</p></th>
        <th><p>Lun.</p></th>
        <th><p>Mar.</p></th>
        <th><p>Mer.</p></th>
        <th><p>Jeu.</p></th>
        <th><p>Ven.</p></th>
        <th><p>Sam.</p></th>
        <th><p>Dim.</p></th>
    </tr>
    <tbody id="hours"></tbody>
</table>
2
mplungjan 10 sep. 2018 a las 10:48

Necesita pasar las funciones this y onclick, por defecto this se refiere al objeto window.

Html

<th id="{{ i }} dim" class="available" onclick='deliveryBooking(this)'></th>

Js

<script>
function deliveryBooking(element)
{
    if ($(element).hasClass('available')) {
        $(element).removeClass('available');
        $(element).addClass('unavailable');
        console.log($(element));
    };
};
</script>
0
Nishant Dixit 10 sep. 2018 a las 09:15

Elimine onclick=deliveryBooking() y use este código.

$('#this_week').on('click', '.available, .unavailable', function(){
    $(this).toggleClass('available unavailable')
})

Este código utiliza delegación de eventos. Lea la API jQuery en caso de que necesite comprender más. .on / .toggleClass

En una nota no relacionada, creo que su marcado probablemente sea incorrecto. <th> se utiliza para encabezados de tabla , mientras que usted <td> para las celdas que contienen datos reales. Creo que todos los <th> dentro de ti for bucle deben cambiarse a <td>, excepto el primero.

0
rmn 10 sep. 2018 a las 10:45