Home / Questions / 466211
Accepted
cosito
Asked: 2022-07-02 14:22:16 +0800 CST 2022-07-02 14:22:16 +0800 CST

insert content to a sub-row, expand and collapse

  • 772

I have my table in html, and through javascript and a button, I can add as many rows as I want, when the row is created, how can I make it in the action column where a button with an "X" is created, when pressing it has a sub row that expands and collapses, like the jquery examples https://datatables.net/examples/server_side/row_details.html , but without using it

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>

javascript

2 Answers

  1. What you need is to capture the element to change or expand, in this case the button, I have placed an id to the button to then expand it via CSS. Your code would look like this:

    <!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>

    And the Javascript would look like this:

    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';
}

    Notice that I used onclick to activate the expand function, and ondblclick, so that when you double click it collapses.

    • 0
  2. Best Answer

    First, some recommendations on good practices:

    • Do not apply styles or events directly on the tags, because that complicates the maintenance of your projects
    • The identifiers must be unique and you are using the same identifier for the table and the body. Leave the id for the table only and you can easily get the body withdocument.querySelector('#example tbody");
    • Assign events with .addEventListener() for more flexibility and control over your code
    • As much as possible, avoid using .innerHTMLto create or update content, because on each execution the browser has to re-render the entire object and its children. There are better options, like .insertAdjacentHTML() , but I'll leave that for you to investigate and improve your code.

    Now yes, let's go with the answer:

    • Create the parent and child rows at the same time, preferably using string templates to make the code more readable
    • Since you haven't created the buttons yet and shouldn't be using inline events, listen for clicks in the table body and see if the event was fired by one of the buttons to execute the expand or collapse function. This is called "Delegate events" , ask san google if you need more information
    • In the function you access the parent row with .closest() and from there you get the child row with .nextElementSibling which is basically the next "sibling" of the parent row and use .classList.toggle() to add or remove the class active, which is what makes it show or hide

    // 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