Contare numero di righe in un form dinamico

[asevenx]

Ciao ragazzi, volevo inserire un form dinamico nel mio sito che permetta di aggiungere e eliminare le caselle di input, cosa che faccio grazie ad uno script trovato in internet.

Avrei ora bisogno di contare le righe e riportarle create dinamicamente, visualizzando il risultato all'interno di un input del form, ma non saprei come fare dato che non capisco molto di javascript.

Il javascript:

function addRow(tableID) {  
     var table = document.getElementById(tableID);  
	  
     var rowCount = table.rows.length;  
     var row = table.insertRow(rowCount);  
	  
     var cell1 = row.insertCell(0);  
     var element1 = document.createElement("input");  
     element1.type = "checkbox";  
     cell1.appendChild(element1);  
	  
     var cell2 = row.insertCell(1);  
     var element2 = document.createElement("input");  
     element2.type = "text";  
     cell2.appendChild(element2);  			
}  
  
function deleteRow(tableID) {  
     try {  
          var table = document.getElementById(tableID);  
          var rowCount = table.rows.length;  
	  
          for(var i=0; i<rowCount; i++) {  
               var row = table.rows[i];  
               var chkbox = row.cells[0].childNodes[0];  
               if(null != chkbox && true == chkbox.checked) {  
                    table.deleteRow(i);  
                    rowCount--;  
                    i--;  
                    }  
		  
               }  
          }catch(e) {  
          alert(e);  
     }  
}

Il form html:

<div class="header">
    <input type="button" value="Aggiungi Riga" onclick="addRow('dataTable')" />
    <input type="button" value="Cancella Riga" onclick="deleteRow('dataTable')" />
    <input type="text" value= '' name="count" />
</div>  
				
    <table id="dataTable"><tr>
        <td><input type="checkbox" name="chk"/></td><td><input type="text" /></td>
    </tr></table>

In poche parole l'input con name "count" deve visualizzare in modo dinamico il numero di righe generate. Grazie a tutti.

 

[WmbertSea]

Ciao, puoi inserire una funzione del genere:

function aggiornaCount(){
  document.getElementsByName('count')[0].value = document.getElementById('dataTable').rows.length;
}

e richiamarla dove vuoi nel tuo script, ad esempio alla fine delle due funzioni che aggiungono/rimuovono le righe:

function addRow(tableID) {
  // ... il contenuto della funzione
  aggiornaCount();
}

function deleteRow(tableID) {
  // ... il contenuto della funzione
  aggiornaCount();
}

 

[asevenx]

Perfetto grazie

 

[asevenx]

Scusami, ho fatto una modifica togliendo gli inpunt iniziali per farle apparire solo cliccando su "aggiungi". Però il conteggio mi calcola sempre una riga in più.

		<script language="javascript">
			function aggiornaCount(){
				document.getElementsByName('count')[0].value = document.getElementById('dataTable').rows.length;
			}		
		
			function addRow(tableID) {  
  				var table = document.getElementById(tableID);  
	  
				var rowCount = table.rows.length;  
				var row = table.insertRow(rowCount);  
	  
				var input_check = row.insertCell(0);  
				var checkbox = document.createElement("input");  
				checkbox.type = "checkbox"; 				
				input_check.appendChild(checkbox);  
	  
				var input_nome = row.insertCell(1);  
				var nome = document.createElement("input");  
				nome.type = "text";
				nome.name = "nome";
 				nome.placeholder = "Nome del prodotto"; 				
				input_nome.appendChild(nome);  	
				
				var input_descrizione = row.insertCell(2);  
				var descrizione = document.createElement("input");  
				descrizione.type = "text";
				descrizione.name = "descrizione";
 				descrizione.placeholder = "Descrizione del prodotto"; 				
				input_descrizione.appendChild(descrizione);  	

				var input_prezzo = row.insertCell(3);  
				var prezzo = document.createElement("input");  
				prezzo.type = "text"; 
				prezzo.name = "prezzo";
 				prezzo.placeholder = "Prezzo"; 
				prezzo.pattern = "[0-9,.]{1,}";
				prezzo.title = "Sono accettati solo numeri, punti e virgole";					
				input_prezzo.appendChild(prezzo);  					
				
				aggiornaCount();				
			}  
  
			function deleteRow(tableID) {  
				try {  
				var table = document.getElementById(tableID);  
				var rowCount = table.rows.length;  
	  
					for(var i=0; i<rowCount; i++) {  
						var row = table.rows[i];  
						var chkbox = row.cells[0].childNodes[0];  
						if(null != chkbox && true == chkbox.checked) {  
							table.deleteRow(i);  
							rowCount--;  
							i--;  
						}  
		  
					}  
				}catch(e) {  
					alert(e);  
				}  
				aggiornaCount();					
			}  
		</script>

				<div class="header"><input type="button" value="Aggiungi prodotto" onclick="addRow('dataTable')" /><input type="button" value="Cancella prodotto" onclick="deleteRow('dataTable')" />
				<input name="count" type="text" />  
				
				
				<table id="dataTable"><tr><td><!-- qui la lista dei prodotti--></td></tr></table>

 

[WmbertSea]

Ciao, .rows.length si riferisce al numero di righe dentro la tabella (cioè agli elementi <tr>). Il tuo codice html iniziale presenta già un <tr> dentro la tabella, questo sfalsa chiaramente il conteggio.
Se usi HTML5 puoi semplicemente lasciare vuota la tabella, così che il conteggio sia corretto:

<table id="dataTable"><!-- qui la lista dei prodotti--></table>

 

[asevenx]

Grazie mille