Ayuda en la programación, respuestas a preguntas / Javascript / ¿Cómo crear dinámicamente una tabla en html con ciertas restricciones? - javascript, html, generado dinámicamente

¿Cómo crear dinámicamente una tabla en html con ciertas restricciones? - javascript, html, generado dinámicamente

Quiero tomar la entrada del usuario (número) ymostrar la imagen tantas veces como número. Si el usuario ingresa 5, la imagen debe mostrarse 5 veces una al lado de la otra con el número correspondiente debajo de las imágenes: debajo de la primera imagen "1", segunda imagen "2". Básicamente, poner esta tabla en bucle.

<HTML>
<BODY>


<TABLE>
<TR>
<TD>
<IMG SRC="C:/Users/User/Desktop/RE/G.JPG">
</TD>
</TR>
<TR><TD ALIGN="CENTER">1</TD>
</TABLE>"


</BODY>
</HTML>

Respuestas

1 para la respuesta № 1

Puedes usar jQuery para esta tarea y escriba una función que genere HTML con un valor dinámico:

Solución completa

<HTML>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
function generateTable(number) {
return "<table><tr><td>" +
"<img src="/images/C:/Users/User/Desktop/RE/G.JPG"></td></tr><tr><td align="center">" +
number +
"</td></table>";
}

$(function(){
var userInput = 3;

for (var i = 0; i < userInput; i++) {
$("#dynamic").append(generateTable(i + 1));
}
});
</script>
</head>
<body>
<div id="dynamic"></div>
</body>
</html>

1 para la respuesta № 2

Puede agregar una entrada y un botón para activar la función. También puede verificar si el valor insertado es realmente un número o no.

$(document).on("click", "#add", function() {
var that = $(this);
var times = parseInt($("#times").val());
for (i=1;i<=times;i++) {
$("#table-wrp").append("<table class="table-times"><tbody><tr><td><img src="/images/http://code52.org/aspnet-internationalization/icon.png" /></td></tr><tr><td>" + i + "</td></tr></tbody></table>");
}
});

$(document).on("input", "#times", function() {
var that = $(this);
var value = that.val();
if ((value != "" || value != false) && !isNaN(value)) {
$("#add").prop("disabled", false);
} else {
$("#add").prop("disabled", true);
}
});

#table-wrp {
height: 80px;
}

.table-times {
width: 100px;
height: 80px;
float: left;
border-collapse: collapse;
}

.table-times td {
border: 1px solid #d8d8d8;
text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="textbox" id="times" />
<button id="add" disabled>Add</button>
<div id="table-wrp"></div>

0 para la respuesta № 3

O para una versión javascript pura de la respuesta de Pugazh

var tab = "<div></div>";
var num = prompt("Enter a number");
for(i = 0; i < num; i++){
document.getElementById("tab").innerHTML += "<div><div><img src="/images/http://placehold.it/150x150"></div><div></div></div>";
}

img{
float: left;
box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
height: 100px;
width: 100px;
margin: 10px;
}

<div id="tab"></div>

Esto funcionará igual de bien, pero no requiere jQuery también.

0 para la respuesta № 4

<HTML>
<BODY>

<div id="tbl"></div>

</BODY>
</HTML>

<script>

var num = prompt("Enter a number");
var div=document.getElementById("tbl");
var l1="",l2="";
for(i=0;i<num;i++)
{
l1 += "<td><img src="/images/C:/Users/User/Desktop/RE/G.JPG"></td>";
l2 += "<td>"+i+"</td>";
}
div.innerHTML = "<table><tr>"+l1+"</tr><tr>" + l2 + "</tr></table>";

</script>

0 para la respuesta № 5

Prueba esto

$(function() {
var tab = "<div></div>";
var num = prompt("Enter a number");
for (i = 0; i < num; i++) {
$("#tab").append("<div class="left"><div><img src="/images/http://placehold.it/150x150"></div><div>" + (i + 1) + "</div></div>");
}
});

div.left {
display: inline-block;
margin-right: 5px;
}

<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
<div id="tab">
</div>
</body>

</html>