Aiuto nella programmazione, risposte alle domande / Javascript / Come creare dinamicamente una tabella in HTML con determinati vincoli? - javascript, html, generato dinamicamente

Come creare dinamicamente una tabella in HTML con determinati vincoli? - javascript, html, generato dinamicamente

voglio ricevere input dall'utente (numero) evisualizza l'immagine tante volte quante sono i numeri. Se l'utente immette 5, l'immagine deve essere visualizzata 5 volte una accanto all'altra con il numero corrispondente sotto le immagini. Sotto la prima immagine "1" Seconda immagine "2".

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

risposte:

1 per risposta № 1

Puoi usare jQuery per questa attività e scrivere una funzione che genera HTML con un valore dinamico:

Soluzione 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 per risposta № 2

È possibile aggiungere un input e un pulsante per attivare la funzione. È inoltre possibile verificare se il valore inserito è effettivamente un numero o meno.

$(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 per risposta № 3

O per una versione javascript pura della risposta di 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>

Funzionerà altrettanto bene, ma non richiede anche jQuery.

0 per risposta № 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 per risposta № 5

Prova questo

$(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>