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.039
192
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
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
Y Problema incolonnamento tabella PHP 7
B Crea pdf da tabella mysql "ultima riga modificata" MySQL 4
F Prendere contenuti da una tabella PHP 4
R Trovare la Tabella del pagamento su WooCommerce WordPress 0
M Tabella con riga più lunga HTML e CSS 6
D modificare questo codice per inserimento in text e non in tabella jQuery 1
M Esportare tabella in csv con intestazione di colonne PHP 6
Samuele Ronzani Sposta dati in una tabella eliminandolo MySQL 6
F Andare a capo all'interno di una tabella WordPress 4
elpirata Query per leggere dati da una tabella mysql e mostrarli a video in base a parametri passati tramite GET PHP 5
V Come stampare su Excel tabella con rowspan e colspan Javascript 2
R Scorporare array e recuperare record tabella PHP 10
R Errore UPDATE tabella mysql PHP 1
S Inserire foto in ogni cella di una tabella Javascript 0

Discussioni simili