2

Tengo mi tabla en html, y por medio de javascript y un boton, puedo agregar cuantas filas quiera,cuando se crea la fila, como puedo hacer que en al columna accion donde se crea un boton con un "X", al presionar tenga una sub fila que se expanda y se contraega, como el los ejemplos de jquery https://datatables.net/examples/server_side/row_details.html, pero sin usarlo

function agregarFila() {
    document.getElementById("example").insertRow(-1).innerHTML = '<td><button type="button" class="btn btn-success" onclick="expandir()">+</button></td><td contenteditable="true">x</td><td contenteditable="true">x</td><td contenteditable="true">x</td><td contenteditable="true">x</td></td>';

}

function expandir() {
   //subfila con textfield, label etc

}
<body>
    <div class="row">
        <div class="col-md-12 ml-auto">
            <button id="enviar" type="button" class="btn btn-success" onclick="agregarFila()" style="float:right">Agregar Direccion</button>
        </div>
    </div>
    <br>
    <table id="example" class="table table-striped table-bordered table-responsive">
        <thead>
            <tr>
                <th style="width:10px;">Acciones</th>
                <th style="width:10px;">Calle</th>
                <th style="width:10px;">Colonia</th>
                <th style="width:10px;">Numero Exterior</th>
                <th style="width:10px;">Numero Interior</th>
            </tr>
        </thead>
        <tbody id="example">
            <tr>
           
            </tr>
        </tbody>
    </table>
    <script src="../Js/table.js"></script>
</body>

4
  • El problema es que no tienes (o no muestras) una fila "principal" y no hay forma de asociar esas "subfilas". Por favor, edita la pregunta para agregar todo el código necesario y/o explicar con más detalle cómo se generan. No sirve de mucho tener un botón en la misma fila, porque se va a ocultar cuando hagas clic y no habrá forma de volver a mostrar esa fila.
    – Triby
    Commented el 2 jul. 2021 a las 18:20
  • La fila principal se crea al dar click en la function agregarfila,, la subfila se crea a partir del boton que esta en esta fila creada
    – cosito
    Commented el 2 jul. 2021 a las 18:22
  • Entonces, en esa función verificas si ya está creada la subfila, para mostrar u ocultar. Si aún no existe, la creas y muestras. ¿Cuántas subfilas planeas que se puedan crear por cada fila principal?
    – Triby
    Commented el 2 jul. 2021 a las 18:29
  • Solamente una subfila por cada fila principal creada, imagino que cuando se agregue la fila principal al mismo tiempo cree la otra, estoy un poco confundido en como debo de hacerlo
    – cosito
    Commented el 2 jul. 2021 a las 18:31

2 respuestas 2

0

Primero, algunas recomendaciones sobre buenas prácticas:

  • No apliques estilos ni eventos directamente en las etiquetas, porque eso complica el mantenimiento de tus proyectos
  • Los identificadores deben ser únicos y estás usando el mismo identificador para la tabla y el cuerpo. Deja el ID solo para la tabla y puedes obtener fácilmente el cuerpo con document.querySelector('#example tbody");
  • Asigna eventos con .addEventListener() para tener mayor flexibilidad y control sobre tu código
  • En la medida de lo posible, evita el uso de .innerHTML para crear o actualizar contenidos, porque, en cada ejecución, el navegador tiene que volver a interpretar todo el objeto y sus hijos. Hay mejores opciones, como .insertAdjacentHTML(), pero eso lo dejo para que investigues y mejores tu código

Ahora sí, vamos con la respuesta:

  • Crea al mismo tiempo las filas principal y secundaria, de preferencia, usando plantillas de cadenas para hacer más legible el código
  • Como no has creado aún los botones y no deberías usar eventos en línea, escucha los clics en el cuerpo de la tabla y analiza si el evento fue disparado por uno de los botones para ejecutar la función de expandir o contraer. A eso se le llama "Delegar eventos", pregunta a san google si necesitas más información
  • En la función, accedes a la fila principal con .closest() y, desde ahí, obtienes la fila secundaria con .nextElementSibling que, básicamente, es el siguiente "hermano" de la fila principal y usas .classList.toggle() para agregar o quitar la clase active, que es lo que hace que se muestre u oculte

// Asigna evento al botón "Agregar"
document.querySelector('#enviar').addEventListener('click', agregarFila);

// Crear variable para acceso al cuerpo de la tabla
let tBody = document.querySelector("#example tbody");
function agregarFila() {
    // Crear fila principal
    tBody.insertRow(-1).innerHTML = `<td><button class="btn btn-success">+</button></td>
        <td contenteditable="true">x</td>
        <td contenteditable="true">x</td>
        <td contenteditable="true">x</td>
        <td contenteditable="true">x</td>`;
    // Crear fila secundaria, puedes usar el formato que desees
    let trChild = tBody.insertRow(-1);
    trChild.innerHTML = `<td></td>
        <td><input type="text" name="input1[]"></td>
        <td><input type="text" name="input2[]"></td>
        <td><input type="text" name="input3[]"></td>
        <td><input type="text" name="input4[]"></td>`;
    // Asigna clase para ocultar
    trChild.classList.add('tr-child');
}

// Delega los clics al cuerpo de la tabla, porque aún no existen los elementos
tBody.addEventListener('click', e => {
    // Analiza si el clic se hizo en un botón, por su clase
    if(e.target.classList.contains('btn-success')) {
        // Ejecuta la función, eviando el botón como parámetro
        expandir(e.target);
    }
});

function expandir(btn) {
   // Desde el botón, obtienes la fila principal
   let trMain = btn.closest('tr');
   // Muestras u ocultas la siguiente fila, agregando o quitando la clase active
   trMain.nextElementSibling.classList.toggle('active');
}
#enviar { float: right; }
/* Las subfilas no se muestran */
.tr-child { display: none; }
/* Solo hasta que se presione el botón */
.tr-child.active { display: table-row; }
<body>
    <div class="row">
        <div class="col-md-12 ml-auto">
            <button id="enviar" class="btn btn-success">Agregar Direccion</button>
        </div>
    </div>
    <br>
    <table id="example" class="table table-striped table-bordered table-responsive">
        <thead>
            <tr>
                <th style="width:10px;">Acciones</th>
                <th style="width:10px;">Calle</th>
                <th style="width:10px;">Colonia</th>
                <th style="width:10px;">Numero Exterior</th>
                <th style="width:10px;">Numero Interior</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script src="../Js/table.js"></script>
</body>

0

Lo que necesitas es captar el elemento a cambiar o expandir, en este caso el botón, yo le he colocado un id al botón para luego expandirlo via CSS. Tu código quedaría así:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
    <div class="row">
        <div class="col-md-12 ml-auto">
            <button id="enviar" type="button" class="btn btn-success" onclick="agregarFila()" style="float:right">Agregar Direccion</button>
        </div>
    </div>
    <br>
    <table id="example" class="table table-striped table-bordered table-responsive">
        <thead>
            <tr>
                <th style="width:10px;">Acciones</th>
                <th style="width:10px;">Calle</th>
                <th style="width:10px;">Colonia</th>
                <th style="width:10px;">Numero Exterior</th>
                <th style="width:10px;">Numero Interior</th>
            </tr>
        </thead>
        <tbody id="example">
            <tr>
           
            </tr>
        </tbody>
    </table>
   <!--  -->
    <script src="../Js/table.js"></script>
    
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
            <script>
</body>

</html>

Y el Javascript quedaría así:

function agregarFila() {
            document.getElementById("example").insertRow(-1).innerHTML = '<td><button type="button" id="boton" class="btn btn-success" onclick="expandir()" ondblclick="contraer()">+</button></td><td contenteditable="true">x</td><td contenteditable="true">x</td><td contenteditable="true">x</td><td contenteditable="true">x</td></td>';

}
function expandir() {
            
    document.getElementById('boton').style.padding = '10px 20px';
}
function contraer() {
            
    document.getElementById('boton').style.padding = '5px 10px';
}

Fíjate que he usado onclick para activar la función expandir, y ondblclick, para que al hacer doble click se contraiga.

2
  • Ya lo probe, pero en esta ocasion solo de esta haciendo mas grande o mas chica la misma, fila, en cambio yo necestio que se cree una subfila, que se mire cuando se expanda y se oculte, asi como en estos ejemplos de bootstrap, pero sin usar jquery datatables.net/examples/api/row_details.html
    – cosito
    Commented el 2 jul. 2021 a las 16:52
  • 1
    Por eso es importante formular bien la pregunta, en este comentario que has hecho entiendo mejor tu pregunta. Commented el 2 jul. 2021 a las 18:14

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.