0

Estoy llenando una tabla dinamica con un arreglo, pero no logro agregar el boton de eliminar en otra culumna de la tabla

mi arreglo

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

Así lleno la tabla

 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";
        });

este es el html de la tabla

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

Quiero agregar el boton de eliminar y que se elimine el elemento que se selecciono pero no lo logro

1
  • se formateó medio raro tu ppregunta, puedes checar para que se muestren bien tus archivos? Commented el 20 oct. 2022 a las 23:43

1 respuesta 1

1

Supongo que esto es lo que buscas

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
}

Un par de recomendaciones:

  1. Cuando creas HTML a partir de string, es bueno ocupar template literal (la comilla invertida), es más fácil que ir concatenando texto con un +

  2. Tu tenías un each (que llama a rollCall) y un for al mismo arreglo. Yo los junté, ya que no tiene sentido recorrer lo mismo 2 veces seguidas

1
  • Si, muchas gracias es justo lo que necesitaba
    – Ivannava
    Commented el 21 oct. 2022 a las 13:19

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.