0

estoy creando una aplicación para agendar citas y tengo una tabla con las horas disponibles, mi pregunta es, como puedo hacer para que el usuario pinche sobre la hora que desea y este valor se guarde en una variable? Estoy ocupando React y TailwindCSS para realizar este proyecto. Esta es mi tabla:

introducir la descripción de la imagen aquí

y este es el código que tengo hasta ahora de la tabla:

<div className='w-fit h-fit shadow-md rounded-lg'>
          <table className="bg-white border-2 border-slate-300">
            <thead>
              <tr>
                <th className='p-2 border-x-2 border-slate-300'>Hoy</th>
                <th className='p-2 border-x-2 border-slate-300'>Mañana</th>
                <th className='p-2 border-x-2 border-slate-300'>proximo dia</th>
                <th className='p-2 border-x-2 border-slate-300'>proximo dia</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>9:00</td>
                <td>9:00</td>
                <td>9:00</td>
                <td>9:00</td>
              </tr>
              <tr>
                <td>10:00</td>
                <td>10:00</td>
                <td>10:00</td>
                <td>10:00</td>
              </tr>
              <tr>
                <td>11:00</td>
                <td>11:00</td>
                <td>11:00</td>
                <td>11:00</td>
              </tr>
              <tr>
                <td>12:00</td>
                <td>12:00</td>
                <td>12:00</td>
                <td>12:00</td>
              </tr>
              <tr>
                <td>13:00</td>
                <td>13:00</td>
                <td>13:00</td>
                <td>13:00</td>
              </tr>
              <tr>
                <td>14:00</td>
                <td>14:00</td>
                <td>14:00</td>
                <td>14:00</td>
              </tr>
            </tbody>
          </table>
        </div>
1
  • ¿utilizando React o JavaScript sin "framework"? Commented el 7 jun. 2022 a las 17:04

1 respuesta 1

0

puedes egregar a cada evento td una funcion que se lance en el evento onclick con los parametros que equivalgan a ese día y hora.

<td onClick={()=>guardarCita("hoy", "9:00"}>9:00</td>

Luego crear la función guardarCita que recupera la hora y ya luego haces lo que quieras con ella.

function guardarCita(day, hour){
   console.log(`tienes cita para ${day} a las ${hour}`);
}

De todas maneras, si estás usando react, se puede optimizar el codigo para pintar la tabla

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.