Stampare n volte un riga

**Keyr95** · 04-07-2016, 09:18

Ciao a tutti, premettendo che non sono un asso in javascript e che sto ancora imparando, sto avendo un problema nel capire come stampare n volte un determinato codice html presente nella pagina.
Vi spiego meglio, ho una pagina html dove si va ad inserire all'interno di una textbox un certo numero n, e un testo vicino che al momento del click fa apparire in basso nella pagina esattamente n righe dove poi inserire altre cose, la funzione che fa apparire una riga l'ho fatta, ma come faccio a fare in modo da farne apparire n?

Vi posto i codici che ho usato:

codice:

<!DOCTYPE html><html>
<head>
    <title>Inserimento Album</title>
    <meta charset="utf-8">
      <link href="InserisciProdotto.css" rel="stylesheet" type="text/css">


<script type="text/javascript" language="javascript">
function visualizza(id){
  if (document.getElementById){
    if(document.getElementById(id).style.display == 'none'){
      document.getElementById(id).style.display = 'block';
 
    }else{
      document.getElementById(id).style.display = 'none';
    }
  }
}
</script>


</head>


<body>
<h2>Inserimento Album</h2>
    
<div id="tabella">
<form name="Inserimento">
<table width="330px" border="0">
<tbody>
<tr>
<td>ID: </td>
<td><input id="ID" name="ID" type="text"/></td>
</tr>
<tr>
<td>Titolo: </td>
<td><input id="Titolo" name="titolo" type="text"/></td>
</tr>
<tr>
<td>Genere: </td>
<td><input id="Genere" name="genere" type="text"/></td>
</tr>
<tr>
<td>Anno: </td>
<td><input id="Anno" name="anno" type="text"/></td>
</tr>
<tr>
<td>Numero tracce :</td>
<td ><input id="NumeroTracce" name="Numero tracce" type="text"/> </td>
<td>
<div id="testo"><a href="#" onclick="visualizza('canzoni'); return false">Inserisci</a></div> <!--Testo da cliccare-->
</td>
</tr>
<tr>
<td>Prezzo: </td>
<td><input id="Prezzo" name="prezzo" type="text"/></td>
</tr>
<tr>
<td>Sconto: </td>
<td><input id="Sconto" name="sconto" type="text"/></td>
</tr>
<tr>
<td valign="top">Descrizione: </td>
<td><input id="Descrizione" name="descrizione" type="text" style="height:200px"/></td>
</tr>
<tr>
<td></td>
<td id="buttons"><input name="salva" type="submit" value="Salva"/></td>
</tr>
</tbody>
</table>
</form>
</div>
<br>

<!--Tabella da visualizzare-->
<div id="canzoni" style="display:none">
<table width="400" border="0">
  <tbody>
    <tr>
      <form>
      <td><input id="titoloCanzone" name="titoloCanzone" type="text" value="titolo"/></td>
      <td><input id="prezzoCanzone" name="prezzoCanzone" type="text" value="prezzo"/></td>
      <td><input id="scontoCanzone" name="scontoCanzone" type="text" value="sconto"/></td>
      <td><input name="salva" type="submit" value="Aggiungi"/></td>
      </form>
    </tr>
  </tbody>
</table>
</div>
  
</body>


</html>

Grazie mille in anticipo

**Fandango Visual** · 04-07-2016, 09:25

Ciao, per capire meglio:
tu vorresti che uno inserisca un numero n nell'input "Numero tracce" e al momento del click sul pulsante "Inserisci" in basso compaiano n righe, pari al numero inserito nell'input, giusto?

**Keyr95** · 04-07-2016, 09:35

sì, esattamente

**Fandango Visual** · 04-07-2016, 13:33

Ok, ho cambiato un po' il tuo codice javascript, è tutto commentato ma se hai domande chiedi pure!

codice:

<script type="text/javascript" language="javascript">function visualizza(id){
  if (document.getElementById){
    // Variabili
    var numeroTracce = document.getElementById("NumeroTracce").value;
    var rigaCanzone = document.getElementById("rigaCanzone");
    var tabellaCanzoni = document.getElementById("tabellaCanzoni");


    if(document.getElementById(id).style.display == 'none'){
      document.getElementById(id).style.display = 'block';
      
      // Controllo numeroTracce se non è vuoto e se è numerico
      if (numeroTracce != "" && !isNaN(numeroTracce)) {
        // Prendo il numero di tracce immesso nell'input e creo dei cloni dalla riga originale
        for(i = 0; i < numeroTracce - 1; i++) {
          var clone = rigaCanzone.cloneNode(true);
          document.getElementById("tabellaCanzoni").appendChild(clone);
          // Setto gli id delle nuove righe e aggiungo una classe
          var n = i + 1;
          clone.setAttribute("id", "rigaCanzone"+n);
          clone.setAttribute("class", "nuovaRiga");
        }
      } else {
        // Se il campo numeroTracce è vuoto o non numerico
        alert("Controlla il campo Numero Tracce");
      }
 
    }else{
      document.getElementById(id).style.display = 'none';
      // Cancello i cloni
      var cloni = tabellaCanzoni.getElementsByClassName("nuovaRiga");
      while (cloni[0]) {
        cloni[0].parentNode.removeChild(cloni[0]);
      }
    }
  }
}
</script>

**Keyr95** · 04-07-2016, 23:11

Grazie mille, il codice è molto chiaro, sei stato gentilissimo. Approfitto della situazione per chiederti un altra cosa, è possibile inviare ad un documento jsp che viene richiamata da una certa form dei dati che stanno all'interno di un altra form?
Ovvero, io ho la form A che richiama un certo codice jsp, ed un form B che richiama un altro codice jsp. Il codice jsp del form B ha però bisogno anche di alcuni campi che sono nella form A, come faccio a passargli il valore di questi campi? premettendo che i due form sono all'interno della stessa pagina html

**Fandango Visual** · 06-07-2016, 22:35

Mi spiace ma purtroppo qui non posso aiutarti, non mi intendo di jsp

**cavicchiandrea** · 07-07-2016, 00:12

Originariamente inviata da Keyr95

Grazie mille, il codice è molto chiaro, sei stato gentilissimo. Approfitto della situazione per chiederti un altra cosa, è possibile inviare ad un documento jsp che viene richiamata da una certa form dei dati che stanno all'interno di un altra form?
Ovvero, io ho la form A che richiama un certo codice jsp, ed un form B che richiama un altro codice jsp. Il codice jsp del form B ha però bisogno anche di alcuni campi che sono nella form A, come faccio a passargli il valore di questi campi? premettendo che i due form sono all'interno della stessa pagina html

Premesso che il form A dovrà essere popolato per primo una volta eseguita questa operazione puoi benissimo recuperare i valori che ti servono nel form B riferendoti al value dell'oggetto del form A (esempio in A hai il campo user nel form B ti riferisci al ID user che essendo univoco potrà essere solo il campo user del form A)

Discussione: Stampare n volte un riga

Strumenti discussione

Ricerca discussione

Visualizza

Stampare n volte un riga

Tag per questa discussione

Permessi di invio