Tabella Dinamica in javascript (aggiungere righe con textinput)

Pierluigi Ghirelli

Nuovo Utente
14 Feb 2015
1
0
0
Ciao sono uno studente di Elettronica del 5 anno e mi sono voluto immergere nel mondo del html,javascript,jquery,php.. per il mio progetto d'esame ma spesso e volentieri mi blocco in piccoli problemi..

Questa volta il problema sembra banale ma devo aggiungere dinamicamente due celle con textinput a questa tabella attraverso un evento ma mi sono bloccato ormai da settimane.

Codice Tabella
Codice:
<table id="tabella">
	<tbody>
      <tr>
		<td><input type="text" name="dato12" value="11"></td>
		<td><input type="text" name="dato12" value="12"></td>
          
     </tr>
	<tr>
		<td><input type="text" name="dato21" value="21"></td>
		<td><input type="text" name="dato22" value="22"></td>
	</tr>
	<tr>
		<td><input type="text" name="dato61" value="61"></td>
		<td><input type="text" name="dato82" value="82"></td>
	</tr>
	<tr>
		<td><input type="text" name="dato51" value="51"></td>
		<td><input type="text" name="dato32" value="32"></td>
	</tr>
         <tr>
		<td><input type="text" name="dato31" value="51"></td>
		<td><input type="text" name="dato32" value="32"></td>
	</tr>
<tr>
		<td><input type="text" name="dato51" value="51"></td>
		<td><input type="text" name="dato32" value="32"></td>
	</tr>
<tr>
		<td><input type="text" name="dato51" value="51"></td>
		<td><input type="text" name="dato32" value="32"></td>
	</tr>
<tr>
		<td><input type="text" name="dato51" value="51"></td>
		<td><input type="text" name="dato32" value="32"></td>
	</tr>
</tbody>
</table>

Codice Evento
Codice:
<a href="javascript:addRow('tabella')">Add ROW</a>

Premetto che mi sono avvicinato da poco al mondo del html,javascript,jquery ecc..
Mi ci sono messo d'impegno e sono riuscito a trovare/creare spulciando un po su internet questo codice, che mi risolve parzialmente il problema.

Codice:
function addRow(id){
    var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];
    var row = document.createElement("TR")
    var td1 = document.createElement("TD")
    td1.appendChild(document.createTextNode("colonna 1"))
    var td2 = document.createElement("TD")
    td2.appendChild (document.createTextNode("colonna 2"))
    row.appendChild(td1);
    row.appendChild(td2);
    tbody.appendChild(row);
  }

L'unica pecca che mi crea due celle perfette nella giusta posizione ma con un testo e non un textinput.
Spulciando un po su internet ho provato varie soluzioni (document.createElement(INPUT) Ecc. ma non sono riuscito a risolvere il problema sono sicuro che avrò fatto errori banali per colpa della mia inesperienza in questo mondo che mi sono avvicinato da poco.

Se avete la pazienza di darmi qualche consiglio vi ringrazierei molto.
 

marino51

Utente Attivo
28 Feb 2013
3.203
207
63
Lombardia
maybe, it can be useful ... sistemando i campi del form
PHP:
<?php
if (empty($_POST)) {
?>
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Documento senza titolo</title>
    <!-- <link href="real-world.css" rel="stylesheet" type="text/css"> -->

    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <script type='text/javascript'>
//<![CDATA[
	$(document).ready(function() {
		var currentItem = 1;
		AddRow(currentItem);

		$('#addnew').click(function(){
			currentItem++;
			AddRow(currentItem);
		});

		$('#removelast').click(function(){
			var rowID = '#row'+currentItem+'b'
			$(rowID).remove();
			var rowID = '#row'+currentItem+'a'
			$(rowID).remove();
			currentItem--;
			$('#items').val(currentItem);
		});

		function AddRow(currentItem) 
		{
			var strToAdd = NewRow(currentItem)
			$('#data').append(strToAdd);
			$('#items').val(currentItem);
		};

		function NewRow(currentItem) 
		{
			var strToAdd
='<tr id="row'+currentItem+'a">'
+'<td>Year</td>'
+'<td>:</td>'
+'<td>'
+'<select name="year'+currentItem+'" id="year'+currentItem+'" >'
+'<option value="2015">2015</option>'
+'<option value="2014">2014</option>'
+'</select>'
+'</td>'
+'<td>Month</td>'
+'<td>:</td>'
+'<td width="17%">'
+'<select name="month'+currentItem+'" id="month'+currentItem+'">'
+'<option value="1">January</option>'
+'<option value="2">February</option>'
+'<option value="3">March</option>'
+'<option value="4">April</option>'
+'<option value="5">May</option>'
+'<option value="6">June</option>'
+'<option value="7">July</option>'
+'<option value="8">August</option>'
+'<option value="9">September</option>'
+'<option value="10">October</option>'
+'<option value="11">November</option>'
+'<option value="12">December</option>'
+'</select>'
+'</td>'
+'<td width="7%">Week</td>'
+'<td width="3%">:</td>'
+'<td width="17%">'
+'<select name="week'+currentItem+'" id="week'+currentItem+'" >'
+'<option value="1">1</option>'
+'<option value="2">2</option>'
+'<option value="3">3</option>'
+'<option value="4">4</option>'
+'</select>'
+'</td>'
+'<td width="8%">&nbsp;</td>'
+'<td colspan="2">&nbsp;</td>'
+'</tr>'
+'<tr id="row'+currentItem+'b">'
+'<td>Actual</td>'
+'<td>:</td>'
+'<td width="17%">'
+'<input name="actual'+currentItem+'" id="actual'+currentItem+'" type="text" />'
+'</td>'
+'<td width="7%">Max</td>'
+'<td width="3%">:</td>'
+'<td>'
+'<input name="max'+currentItem+'" id="max'+currentItem+'" type="text" />'
+'</td>'
+'<td>Target</td>'
+'<td>:</td>'
+'<td>'
+'<input name="target'+currentItem+'" id="target'+currentItem+'" type="text" />'
+'</td>'
+'</tr>';
			return strToAdd;
		};
	});
//]]>
    </script>

    <style>
    </style>

  </head>

  <body>

    <form name='myform' method='POST'>
      <table class="dd" width="100%" id="data">
        <tbody>
        </tbody>
      </table>

      <input type="submit" name="submit"                     value="SubmitValues" />
      <input type="button" name="addnew"     id="addnew"     value="Add new item" />
      <input type="button" name="removelast" id="removelast" value="Remove last item" />
      <input type="hidden" name="items"      id="items"      value="0" />
    </form>
  </body>
</html>
<?php
}
else
{
  while(list($chiave, $valore)=each($_POST))
  {
    ${$chiave}=trim(strip_tags($valore));
    echo $chiave." = ".${$chiave}."<br />";
  }
}
?>
 
Discussioni simili
Autore Titolo Forum Risposte Data
A [Javascript] Somma di un campo in una tabella dinamica Javascript 0
A [Javascript] tabella dinamica e onchange su funzione Javascript 1
U [PHP - RISOLTO] Tabella dinamica: colonne selezionate da checkbox PHP 40
L Tabella dinamica con campi interni a td jQuery 1
MarcoGrazia Riga di tabella dinamica e suggeritore Javascript 2
AlexPD Inserire tabella excel dinamica su pagina web PHP 4
felino [Smarty] Stampa di una tabella dinamica, condizione su una cella PHP 1
alankanz Tabella dinamica PHP 2
S tabella dinamica php html PHP 2
filippino Tabella larghezza dinamica HTML e CSS 1
L Tabella dinamica PHP 2
V Tabella html dinamica con php PHP 4
P Stampare una tabella dinamica con dati json jQuery 1
ypsilon86 Gestione di una tabella dinamica MySQL 21
M Creare tabella dinamica PHP 2
S Tabella dinamica php PHP 1
ypsilon86 Da un FORM creare una Tabella dinamica PHP 7
C Inserire dei dati di una tabella dinamica in un file esterno js Javascript 17
S Tabella dinamica con php PHP 9
L Tabella dinamica HTML e CSS 2
P tabella dinamica PHP 3
C Tabella dinamica con jquery ephp jQuery 2
F tabella dinamica e puntamento a record specifico Classic ASP 5
S generazione di una tabella dinamica Ajax 1
F Creare una tabella dinamica con la sintassi del W3C Javascript 1
Wox Cambio colore tabella dinamica Classic ASP 7
C [PHP] email da tabella dinamica PHP 1
C aggiunta dinamica di una tabella senza ridirezione Javascript 3
D Miglior modo per estrarre le occorrenze di un elemento in un set di più file xml e quindi scrivere il risultato in una tabella Excel o magari in JSON XML 0
S da casella di testo a campo tabella Database 0
E Tabella righe e colonne PHP 0
G Sviluppo tabella orizzontale in un certo ordine PHP 2
R tabella troppo grande Database 0
C Creare Tabella Dati Meteo prelevandoli da dei Tags in un altro foglio PHP 27
M Contare totale risultati tabella in un periodo di tempo PHP 5
E Php aggiornamento tabella PHP 9
L Riempimento di una tabella al click di un bottone Javascript 1
M Accodare record presi da un altra tabella PHP 8
E Estrarre dati da doppia tabella, banale ma non sempre PHP 1
otto9due Inserire o aggiornare tabella my sql controllando una coppia di valori PHP 7
Couting95 inserire dati da un file di testo in una tabella in php PHP 1
N dati tabella non presi PHP 1
M Riportare in tabella HTML dati estratti con query SQL MySQL 0
R INSERT INTO tabella non funziona Classic ASP 2
A Tabella con bottoni per aggiornamento record PHP 6
spider81man Creazione di un UNICA tabella da più file .CSV PHP 1
A filtro su tabella jQuery 3
S problema con recupero dati tabella mysql PHP 2
E Progressbar estrazione dati da tabella mySQL Ajax 9
D controllare valore in tabella mysql PHP 0

Discussioni simili