1

disculpen las molestia, estoy acá pidiendo ayuda o recomendaciones de como poder implementar las acciones que me piden en mi código ya que he logrado avanzar bastante pero aun asi no me ha dado.

Bueno lo que me piden hacer con javascritp es dar funcionamientos a 2 botones el primero de ellos llamado agregar, el segundo agregarlista, el primer boton toma los valores de los input y los pasa a unos tr creados con 3 td que son el numero, nombre y carnet, luego el segundo boton debe agregar un 4to td en el tr principal de mi java que ponga la fecha y segun cuantas nuevos estudiantes existan en el codigo beben agregarle un cheackbox a la par de cada estudiante pero con la fecha de un dia y si le vuelve a dar al segundo boton se crea otra lista con otra fecha o la misma, donde va a agregar la cantidad de cheackbox pero dentro de la misma columna creada, pero si yo vengo y le doy al boton de agregar y agrego datos nuevos y creo una nueva fila las dos columnas creadas deben tener en la parte de la fila nueva un cheack box.

aun asi dejare un video por si me mal explico: https://youtu.be/K_pdyhasQ1U

se muestra como nos piden realizarlo lo que pasa es que no he podido implementar el botón de +asistencias todo lo demas lo he podido implementar pero eso me esta trastocando la mente pero ese boton no he podido implementarlo de manera correcta a mi código el cual es ese, lo que pasa es que debe seguir las siguientes reglas que me han pedido:

JavaScript:

  • getElementById().
  • value.
  • createElement().
  • appendChild().
  • setAttribute().
  • getElementsByTagName().
  • length.

Mi Codigo:

var contador=0;


function agregar(){

    var table= document.getElementById('nose');
    var tr= document.createElement('tr');
    tr.setAttribute("id","nose3");
    var td1= document.createElement('td');
    var td2= document.createElement('td');
    var td3= document.createElement('td');
    var nom= document.getElementById('nombre');
    var cart= document.getElementById('carnet');


    if(nom.value==""||cart.value=="")
    {
        alert("Complete los datos porfavor");
    }
    else{

    contador++;
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);

    td1.innerHTML=contador;
    td2.innerHTML=nom.value;
    td3.innerHTML=cart.value;

    table.appendChild(tr);
    var nom= document.getElementById('nombre').value = "";
    var cart= document.getElementById('carnet').value = "";

    }


}


function agregarlista(){

    var tr= document.getElementById('nose1');
    var ftr= document.getElementById('nose3')
    var td= document.createElement("td");
    var ntr= document.createElement("tr");
    var dato= document.createElement("p")
    var check =document.createElement("input");
    check.setAttribute("type","checkbox");

    var fecha = new Date();
    var dd = fecha.getDate();
    var mm = fecha.getMonth()+1; 
    var yyyy = fecha.getFullYear();
    if(dd<10) 
    {
        dd='0'+dd;
    } 

    if(mm<10) 
    {
        mm='0'+mm;
    } 
    fecha = mm+'-'+dd+'-'+yyyy;
    console.log(fecha);
    fecha = mm+'/'+dd+'/'+yyyy;
    console.log(fecha);
    fecha = dd+'-'+mm+'-'+yyyy;
    console.log(fecha);
    fecha = dd+'/'+mm+'/'+yyyy;
    console.log(fecha);

    td.appendChild(dato);


    dato.innerHTML=fecha;

    tr.appendChild(td);
    ftr.appendChild(check);



}

Gracias de antemano. :D

3
  • No funciona el video. Por lo tanto no se puede saber que es lo que necesitas. Por favor, en vez del video. Explicá vos que es lo que necesitas.
    – Fran Islas
    el 10 nov. 2018 a las 19:10
  • Listo ya esta funcionando el vídeo ahí disculpa los inconvenientes, y pongo el vídeo por que soy pésimo explicándome y así tiene una representación mas visual de lo que estoy tratando de hacer.
    – JaimepaOK
    el 10 nov. 2018 a las 19:17
  • Me parece que en vez de enviarnos a ver un video (en particular evito los videos si hay un gif animado como alternativa) debieras explicarnos qué te piden, una descripción del enunciado
    – ffflabs
    el 10 nov. 2018 a las 19:17

1 respuesta 1

1

Te dejo un ejemplo de como lo podrías hacer. Seguramente debe haber otros métodos para llevar acabo el ejercicio. Pero es la mas fácil de comprender que se me ocurrió. Quedó un poco extenso el código por tantos comentarios, la idea es que comprendas todo lo que se hace y no solo te sirva para copiar y pegar. Sacando los comentarios, es un código simple y corto. Espero que te sea útil. Saludos!

var autoIncrement =1;


function addItem(){
  let nombre = document.getElementById("txt_Nombre").value;
  let carnet = document.getElementById("txt_Carnet").value;
  
  //Esta es una validacíon basica. Ya queda en vos verificar que no haya espacios o cosas raras...
  if(nombre.length < 1 || carnet.length < 1)
    alert("Debe completar los campos primero.");
  else{
    //Vamos a verificar si existen filas para copiarlas directamente y de este modo respetar la cantidad de check
    //Seleccionamos el body con getElementsByTagName(). 
    // Recorda que retorna un array asi que seleccionamos el primero.
    var tblBody = document.getElementsByTagName("tbody")[0];
    if(autoIncrement>1)//Existen filas
    {
    
    let filas = tblBody.getElementsByTagName("tr");
    
    //Simplemente copiamos una y reemplazamos los datos.
    let newRow = filas[0].cloneNode(true);
    //Seleccionamos las columnas
    let columnas = newRow.getElementsByTagName("td");
    columnas[0].textContent = autoIncrement++;
    columnas[1].textContent = nombre;
    columnas[2].textContent = carnet;
    
    //agregamos la nueva fila.

    tblBody.appendChild(newRow);
    
    }
    else // no existen, vamos a crear la estructura.
    {
    //Ahora vamos a crear el item/ estudiante que vamos a agregar a la tabla.
    //Primero creamos la fila
    let tblrow = document.createElement("tr");
    // ahora creamos cada columna
    let tdNro = document.createElement("td");
    let tdNombre = document.createElement("td");
    let tdCarnet= document.createElement("td");
    
    //Incormporamos los datos a cada td
    
    tdNro.textContent = autoIncrement++; // asignamos el nro y luego lo incrementamos.
    tdNombre.textContent = nombre;
    tdCarnet.textContent = carnet;
    
    //agregamos las columnas a la fila
    tblrow.appendChild(tdNro);
    tblrow.appendChild(tdNombre);
    tblrow.appendChild(tdCarnet);
           
    //agregamos la fila a la tabla, mas especificamente al body.
    tblBody.appendChild(tblrow);
    
    //Limpiamos los campos.
    document.getElementById("txt_Nombre").value = "";
    document.getElementById("txt_Carnet").value = "";
    
  }
  }
}

function addAsistencia(){
  //Lo que vamos a hacer es seleccionar primero el head para agregar la fecha en el mismo
  let thead = document.getElementsByTagName("thead")[0];
  //Seleccionamos la primer fila del head (en este caso unica)
  let trHead =document.getElementsByTagName("tr")[0];

  // Creamos una nueva columna
  let thFecha = document.createElement("th");
  //Le pasamos la fecha actual en el formato que la queremos.
   var fecha = new Date();
    var dd = fecha.getDate();
    var mm = fecha.getMonth()+1; 
    var yyyy = fecha.getFullYear();
    
  thFecha.textContent = dd+"/"+mm+"/"+yyyy;//
  // vamos a hacer uso de setAttribute() para cambiar el color del texto y tamaño de la columna.
  thFecha.setAttribute("style","color:grey; width:75px")
  //Agregamos la columna a la fila
  trHead.appendChild(thFecha);
  
  //ahora vamos a proceder a agregar los check a cada fila
  // Para esto vamos a seleccionarlas con getElementsByTagName()
  
  //Primero el tbody
  let tbody = document.getElementsByTagName("tbody")[0];
  
  //ahora vamos a seleccionar las filas y las guardamos en un array 
  let tbodyRows = tbody.getElementsByTagName("tr");
  
  //ahora vamos a recorrer todas las filas con un for
  for(i = 0 ; i < tbodyRows.length  ; i++) {
    //vamos a agrechar los check
     let check = document.createElement("input");
     // asignamos el tipo
     check.setAttribute("type","checkbox");
     // creamos una columna y le agregamos el check.
     let tdcheck = document.createElement("td");
     tdcheck.appendChild(check);
     //Vamos a centrar los check 
     tdcheck.setAttribute("style","text-align:center");
     //finalmente agregamos la columna a la fila
     tbodyRows[i].appendChild(tdcheck);
 }
  
  
  
}
.panel{
width:50%;
background-color:#ecf0f5;

}
#myTable{
  width:100%;
}
#myTable thead tr th{
  background-color:#89b6ef;
}

/*.data{
  width:25px;
}*/
<div class="panel">
    Nombre: <input type="text" id="txt_Nombre"><br>
    Carnet: <input type="text" id="txt_Carnet"><br>
    <button id="btnAddItem" onclick="addItem()">Agregar estudiante</button>
    <button id="btnAddAsistencia" onclick="addAsistencia()">+ asistencia</button>
</div>
<h3>Listado de estudiantes </h3>
<table id="myTable">
    <thead>
        <tr>
            <th>No.</th>
            <th>Carnet</th>
            <th>Nombre</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

1
  • Muchas Gracias, me ah ayudado mucho pude comprender como lo hizo todo a la perfección y me pude percatar que no tenia una idea tan alegada de la solución que ha dado.
    – JaimepaOK
    el 11 nov. 2018 a las 6:17

Tu Respuesta

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

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