0

Estoy haciendo una tabla donde hay 2 columnas, en el cual con javascript yo agrego columnas y filas, pero el problema es que quiero agregar una fila en la 'Columna 2' a la misma altura que yo agrego una fila en la 'Columna 1', es decir que estén una al lado de la otra, pero cuando añado una fila en la 'Columna 2' se me agrega debajo de la fila que añadi anteriormente a la 'Columna 1' y no quiero que pase eso, no entiendo por que pasa eso.

const agregarBtn_Uno = document.getElementById('agregar');
const agregarBtn_Dos = document.getElementById('agregar_dos')
const inputUno = document.getElementById('input');
const inputDos = document.getElementById('input_dos')
const tabla = document.getElementById('tablaGeneral');
var table = [""];


agregarBtn_Uno.addEventListener('click',()=> {
    
for(i=0; i<table.length; i++){
    tabla.insertRow(-1).innerHTML = '<tr><td>'+inputUno.value+'</td>'; 
}
})

agregarBtn_Dos.addEventListener('click',()=> {

    for(i=0; i<table.length; i++){
        tabla.insertRow(-1).innerHTML = '<td><td>'+inputDos.value+'</td></tr>';  
    }
})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Organizador</title>
</head>
<body>

    <p>Formas para estudiar</p>

    <table id="tablaGeneral" border="1">
    <tr>
        <td>Columna 1</td>
        <td>Columna 2</td>
    </tr>
</table>

<br>

<label for="">Añadir texto a Columna 1</label>
<br>
<input id="input" type="text">
<button id="agregar">Añadir</button>
<br>
<label for="">Añadir texto a Columna 2</label>
<br>
<input id="input_dos" type="text">
<button id="agregar_dos">Añadir</button>


<script src="app.js"></script>
    
</body>
</html>

1 respuesta 1

1

Esto se debe a una incomprensión de determinados comportamientos de HTML y Javascript, pero ojalá te pueda ayudar para sacar adelante tu proyecto.

  1. Debes saber que las tablas tienen una estructura única, no se pueden tratar como divs ordinarios: debes investigar las clases nativas que traen, la manera en que el navegador las manipula y su inmunidad frente a determinados estilos.
  2. Las tablas, al igual que otros objetos HTML, tienen autocompletado por parte del navegador, es decir que el navegador entiende que hay un error en el código y lo corrige.

Con esas dos ideas en la cabeza, vamos a tu código:

  1. Añadir en columna 1 o 2 se hace por separado, por lo tanto, cuando inyectas la información de la columna 1 o 2, el navegador añade el código faltante, por lo tanto, construye una fila. Si utilizas el botón 1, la fila se crea integralmente, por lo tanto cuando quieres usar el 2, no estás interactuando con la última fila creada, sino una nueva.
  2. Si el comportamiento que buscas es poder llenar los campos de la columna 1 y 2 de forma autónoma y deseas hacerlo con tablas, deberás crear un script que te ayude a lograrlo, por ejemplo:
<!-- Añadí thead y tbody para aislar los selectores -->
<table id="tablaGeneral" border="1">
    <thead>
        <tr>
            <th>Columna 1</th>
            <th>Columna 2</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>


const agregarBtn_Uno = document.getElementById('agregar');
const agregarBtn_Dos = document.getElementById('agregar_dos')
const tabla = document.getElementById('tablaGeneral');

// añade esto
const updateTable = (function() {
    const rows = [0, 0];
    const inputs = [document.getElementById('input'), document.getElementById('input_dos')];
    
    return (direction) => {
        // se define con qué columna se interactúa
        const currentColumn = direction - 1;
        // obtiene el valor en curso
        const value = inputs[currentColumn].value
        // reinicializa el valor de los inputs base
        inputs[currentColumn].value = '';

        if(value === '') {
            // sale si no hay valor
            alert('No hay valor para ingresar')
            return;
        }

        if(
            // si están al mismo nivel ambas tablas, se añade la fila
            (rows[0] == rows[1])
            // si la columna 1 tiene más y se añade info en 1, se crea nueva fila
            || ((rows[0] > rows[1]) && direction === 1)
            // si la columna 2 tiene más y se añade info en 2, se crea nueva fila
            || ((rows[0] < rows[1]) && direction === 2 )
        ) {
            tabla.insertRow(-1).innerHTML = `<tr>
                <td>${direction === 1 ? value : ''}</td>
                <td>${direction === 2 ? value : ''}</td>
            </tr>`;
        }
        // si se añade info en una fila que aún tiene espacio
        else{
            // se selecciona la última línea
            // sumo 1 porque se debe compensar el index 0 equivale a 1
            const row = tabla.querySelector(`tr:nth-of-type(${rows[currentColumn] + 2})`);
            console.log(row, rows[currentColumn])
            // se selecciona el que por lógica está vacío
            row.children[currentColumn].innerHTML = value;
        }
        // se actualiza el monitor de columnas
        rows[currentColumn]++;    }
})();

agregarBtn_Uno.addEventListener('click',()=> {updateTable(1)})
agregarBtn_Dos.addEventListener('click',()=> {updateTable(2)})

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.