1

tengo una tabla, y quiero enumerar los elementos de la primera fila, la de los periodos del 0 a x cantidad de periodos pero no he podido

let cp = document.querySelector("#cp")
let saldo = document.querySelector("#saldo")
let intereses = document.querySelector("#intereses")
let periodos = document.querySelector("#periodos")
let btn = document.querySelector("#btn")

var body = document.getElementsByTagName("body")[0]

function newTable(){
    var tabla   = document.createElement("table");
    var tblBody = document.createElement("tbody");
   
    
    for (let i = 0; i <= parseInt(periodos.value); i++) {
        var encabezado = document.createElement("tr")
        var hilera = document.createElement("tr");
        hilera.setAttribute("class", "hilera")
        var selectorHilera = document.getElementsByClassName("hilera")

        for (let j = 0; j < 5; j++) {

            switch (j) {
                case 0:
                    var textoEncabezado = document.createTextNode("Periodo")
                    break;
            
                case 1:
                    var textoEncabezado = document.createTextNode("Interez")
                break

                case 2:
                    var textoEncabezado = document.createTextNode("Cuota/Pago")
                break

                case 3:
                    var textoEncabezado = document.createTextNode("Abono")
                break

                case 4:
                    var textoEncabezado = document.createTextNode("Saldo") 
                break
                
                default:"NDT"
                    break;
            }
    
            
            var celdaEncabezado = document.createElement("td")
            
            var celda = document.createElement("td");
            var texto = document.createTextNode("12345")

            celdaEncabezado.appendChild(textoEncabezado)
            encabezado.appendChild(celdaEncabezado)
            encabezado.setAttribute("style", "background-color: #0000ff")

            celda.appendChild(texto)
            hilera.appendChild(celda)
        }
        tblBody.appendChild(hilera)
    }
    
    tabla.appendChild(encabezado)
    tblBody.setAttribute("id", "tabla")
    tabla.appendChild(tblBody)
    
    body.appendChild(tabla)
    tabla.setAttribute("border", "2")



}

btn.addEventListener("click", newTable)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text"  placeholder="Cuota/Pago" id="cp">
    <br>
    <input type="text" placeholder="Saldo" id="saldo" >
    <br>
    <input type="text" placeholder="Intereses" id="intereses">
    <br>
    <input type="text" placeholder="Periodos" id="periodos">
    <br>
    <input type="button" value="Generar Intereses" id="btn">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js.js"></script>
</body>
</html>

2
  • Te salta un error en la consola? el 16 mar. 2019 a las 23:59
  • no, el problema es que no puedo seleccionar la primera fila de elementos desde js el 17 mar. 2019 a las 0:30

1 respuesta 1

1

He cambiado algo tu código. He añadido valores para los elementos los input para no tener que teclear de nuevo tantas veces. Puedes borrarlos si quieres.

Lo importante: he creado un array hileras donde guardo las nuevas hileras creadas. Para seleccionar la primera celda de la segunda hilera puedes escribir:

hileras[2].querySelector("td:nth-of-type(1)").style.background = "gold"; 

Si por alguna razón no te gusta lo de guardar las hileras creadas en un array, puedes hacer lo siguiente una vez creadas todas las hileras

let todasLasHileras = tabla.querySelectorAll("tr");// incluye el encabezado 
todasLasHileras[4].querySelector("td:nth-of-type(2)").style.background = "skyblue";

Estos son solo unos ejemplos para ver como puedes acceder y manipular una celda de la nueva tabla

Por favor lea los comentarios en el código.

let cp = document.querySelector("#cp")
let saldo = document.querySelector("#saldo")
let intereses = document.querySelector("#intereses")
let periodos = document.querySelector("#periodos")
let btn = document.querySelector("#btn");
//el array de las hileras
let hileras = [];

//var body = document.getElementsByTagName("body")[0]
let body = document.querySelector(".contenedor-tabla");


// una funcion para crear el nuevo encabezado. si no necesitas crear varias tablas puedes mover este código en el html

function newTable(){
    //las dos siguientes líneas de código son opcionales en el caso en el cual quieres actualizar la tabla en lugar de crear una nueva cada vez que haces click en el boton
    // vaciar el contenedor
    body.innerHTML = "";
    //vaciar el array de las hileras
    hileras = [];

    var tabla   = document.createElement("table");
    var tblBody = document.createElement("tbody");
  
    var encabezado = `
<tr style="background-color: #0000ff">
  <td>Periodo</td>
  <td>Interez</td>
  <td>Cuota/Pago</td>
  <td>Abono</td>
  <td>Saldo</td>
</tr>`;
  
   body.appendChild(tabla);
   tabla.innerHTML = encabezado;
   tabla.appendChild(tblBody);
  
  
  return tabla;
} 


// una función para crear una nueva "hilera"
function nuevaHilera(i){
  let tr = document.createElement("tr");
  tr.innerHTML = `
<tr class="hilera">
  <td>${i + 1}</td>
  <td>${Number(intereses.value)}</td>
  <td>${Number(cp.value)}</td>
  <td>Abono</td>
  <td>Saldo</td>
</tr>`;
  
  return tr;
}
  
   

  btn.addEventListener("click", ()=>{
    let tabla = newTable();
    let n = Number(periodos.value);

    for(var i = 0; i < n; i++ ){
      let _hilera = nuevaHilera(i);
      tabla.appendChild(_hilera);
      hileras.push(_hilera);
  }
    
    // manipular los estilos la primera celda de la segunda hilera
    hileras[2].querySelector("td:nth-of-type(1)").style.background = "gold";
    
    //solución alternativa
    let todasLasHileras = tabla.querySelectorAll("tr");// incluye el encabezado 
    todasLasHileras[4].querySelector("td:nth-of-type(2)").style.background = "skyblue";
    
  })
input{margin:.5em;}
table{border-collapse:collapse;}

td{padding:.5em; border:1px solid}
tr[style]{color:white;}
<input type="text"  placeholder="Cuota/Pago" id="cp" value = "10000">
    <br>
    <input type="text" placeholder="Saldo" id="saldo" value="1000"  >
    <br>
    <input type="text" placeholder="Intereses" id="intereses" value=".3">
    <br>
    <input type="text" placeholder="Periodos" id="periodos" value="10">
    <br>
    <input type="button" value="Generar Intereses" id="btn">
    
    <div class="contenedor-tabla"></div>

1
  • 1
    muchas gracias enxaneta explicaste muy bien el código, y pude comprender algunas nuevas cosas, gracias de verdad el 17 mar. 2019 a las 23:51

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.