Tabella Dinamica in javascript (aggiungere righe con textinput)

Pierluigi Ghirelli · 14 Feb 2015

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 · 14 Feb 2015

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 />";
  }
}
?>

Cerca

Cerca

Tabella Dinamica in javascript (aggiungere righe con textinput)

Pierluigi Ghirelli

Nuovo Utente

marino51

Utente Attivo

Discussioni simili