0
168
VistasProblema de autocompletar con mi generador de tablas
Estoy intentando crear un generador de table para HTML con JavaScript. Cuando intenté generar, el primer campo se creó con éxito. Pero el llenado automático no funciona correctamente.
¿Como puedó resolver esté problema?
Código de mi biblioteca:
export default class Table { #maxlength constructor(body) { this.body = body this.parent = document.createElement('table') this.body.append(this.parent) this.#maxlength = 0; } add(...values) { let element = document.createElement('tr') let elname = this.parent.childElementCount < 1 ? "th" : "td" function add(value) { let addval = document.createElement(elname) addval.textContent = value element.append(addval) } [...values].map(el => { add(el) }) if(this.#maxlength - [...values].length > 0) { new Array(this.#maxlength - [...values].length).map(el => { add("") }) } if (this.#maxlength < [...values].length) { this.#maxlength = [...values].length } this.parent.append(element) } }Mi Javascript HTML:
import Table from './Table.js' const { body } = document; let table = new Table(body) table.add("a","a","a") table.add("a","a","a") table.add("a","a","a") table.add("a","a") // AUTOFILLING table.add("a") // AUTOFILLING table.add("a","a") // AUTOFILLING table.add("a","a","a")
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Parece que estaba creando los elementos th o td , pero nunca se agregaron al elemento tr . Creo que esto se debió principalmente al hecho de que en realidad no estaba agregando las entradas vacías a los values como se pretendía. La comparación de values.length con this.#maxlength en un ciclo while resuelve este problema como se ve en el fragmento de código a continuación:
class Table { #maxlength; constructor(body) { this.body = body; this.parent = document.createElement('table'); this.body.append(this.parent); this.#maxlength = 0; } add(...values) { let element = document.createElement('tr'); let elname = this.parent.childElementCount < 1 ? "th" : "td"; // Add blank entries for null values while (values.length < this.#maxlength) { values.push(""); } function add(value) { let addval = document.createElement(elname); addval.textContent = value; element.append(addval); } [...values].forEach(el => { add(el); }); if (this.#maxlength - [...values].length > 0) { new Array(this.#maxlength - [...values].length).forEach(el => { add(""); }); } if (this.#maxlength < [...values].length) { this.#maxlength = [...values].length; } this.parent.append(element); } } const { body } = document; let table = new Table(body); table.add("a", "a", "a"); table.add("a", "a", "a"); table.add("a", "a", "a"); table.add("a", "a"); // AUTOFILLING table.add("a"); // AUTOFILLING table.add("a", "a"); // AUTOFILLING table.add("a", "a", "a"); table, th, td { border: 1px solid black; } th, td { width: 1.5rem; }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta