1

He creado una función que selecciona una imagen, obteniendo su url, texto alternativo y tamaño.

Necesito agregar a una tabla esos datos. En el HTML tengo un <tbdody> donde tengo que ir poniendo los <tr>y <td> correspondientes.

Son 3 campos como he dicho: URL, texto alternativo y dimensiones, y cada vez que ejecute la función e introduzca el número de imagen que quiero seleccionar, deben ir agregándose los datos.

1 respuesta 1

0

Para cada imagen del documento estoy creando una nueva fila a la tabla data. Para cada atributo estoy creando una nueva casilla td dentro de la fila

Espero que esto es lo que preguntabas

//todas las imágenes del documento
let images = document.querySelectorAll("img");
//para cada imagen
images.forEach(img=>{
  //recupera el valor de los atributos
  let attrs = [
    img.getAttribute("src"),
    img.getAttribute("alt"),
    img.getAttribute("width"),
    img.getAttribute("height")
  ]
  // crea un nuevo elemento te
  let tr = document.createElement("tr");
  
  //para cada atributo de la imagen crea un nuevo elemento td cuyo innerHTML es el valor del atributo
  for(let i = 0; i < attrs.length; i++ ){
    let td = document.createElement("td");
    td.innerHTML = attrs[i];
    //agrega el td al tr
    tr.appendChild(td);
  }
  
  //agrega el tr a la tabla
  data.appendChild(tr)
});
table{border-collapse:collapse;}
td{border:1px solid; padding:.5em;}
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/imgres.jpg" alt="El grito de Munch" width="200" height="252" />
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" alt="Mi perro Darwin" width="200" height="200"/>

<table id="data">
  <tr>
    <td>src</td>
    <td>alt</td>
    <td>width</td>
    <td>height</td>
  </tr>
</table>

1
  • Eso era, muchísimas gracias!!! el 26 may. 2019 a las 14:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.