Home / Questions / 563440
Accepted
Ivannava
Asked: 2022-10-21 15:33:59 +0800 CST 2022-10-21 15:33:59 +0800 CST

Add a delete button to Js pivot table

  • 772

I'm filling a pivot table with an array, but I can't add the delete button in another column of the table

my arrangement

const response =  [
   "elemento1",
   "elemento2"];

So I fill the table

 load("files", function (response) {
    
            var botones = document.getElementsByClassName('eliminaFile');
        
            multipleFileUploadError.style.display = "none";
            var content = "<p>Archivos Cargados: </p>";
        
        
            response.forEach((file, index) => rollCall(file, index));
        
            response.sort();
        
            let table = document.getElementById("tabla");
        //aquí recorro mi arreglo
            for (var i = 0; i < response.length; i++) {

        //aquí lleno la primer columna
                table.innerHTML += "<tr><td><a href='" + response[i] + "' target='_blank'>" response[i]+ "</a></td></tr>";
        
//aqui intento crear la otra columna con el botón eliminar
        // content += "<p>Descargar Archivo : <a href='" + response[i] + "' target='_blank'>" + response[i] + "</a></p>" + "<input class='eliminaFile' type='button' id='" + response[i] + "' value='Eliminar'>";
    
            }
            multipleFileUploadSuccess.innerHTML = content;
            multipleFileUploadSuccess.style.display = "block";
        });

this is the html of the table

<table class="demo">
                <thead>
                    <tr>
                        <th>Archivo</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody id="cuerpoTabla">
                </tbody>
            </table>

I want to add the delete button and delete the element that was selected but I can't

javascript

1 Answers

  1. Best Answer

    I guess this is what you're looking for

    load("files", function (response) {
    multipleFileUploadError.style.display = "none";
    var content = "<p>Archivos Cargados: </p>";
    response.sort();

    let table = document.getElementById("tabla");

    for (var i = 0; i < response.length; i++) {
        rollCall(response[i], i)

        table.innerHTML += `<tr>
            <td><a href="${response[i]}" target="_blank">${response[i]}</a></td>
            <td><input class='eliminaFile' onclick="eliminar('${response[i]}',${i})" type='button' id='${response[i]}' value='Eliminar'></td>
        </tr>`;
    }
    multipleFileUploadSuccess.innerHTML = content;
    multipleFileUploadSuccess.style.display = "block";
});

function eliminar(objeto, index){
  //aquí agregas tu logica de eliminación
}

    A couple of recommendations:

    1. When you create HTML from a string, it is good to use a literal template (the backtick), it is easier than concatenating text with a +

    2. You had an each (which calls rollCall) and a for to the same array. I put them together, since it makes no sense to go through the same thing 2 times in a row

    • 1