[JQUERY] tabella con un form per ogni riga

[las]

ho un codice tipo questo:

<table>
	<form name="form1" id="form1" action="form.php">
		<tr>
			<td>testo</td>
			<td>
				<input type="text" name="campo" value="" />
			</td>
			<td>
				<input type="submit" name="Invia" value="Invia">
			</td>
		</tr>
	</form>
	<form name="form2" id="form2" action="form.php">
		<tr>
			<td>testo</td>
			<td>
				<input type="text" name="campo" value="" />
			</td>
			<td>
				<input type="submit" name="Invia" value="Invia">
			</td>
		</tr>
	</form>
	<form name="form3" id="form3" action="form.php">
		<tr>
			<td>testo</td>
			<td>
				<input type="text" name="campo" value="" />
			</td>
			<td>
				<input type="submit" name="Invia" value="Invia">
			</td>
		</tr>
	</form>
</table>

in pratica ogni riga della tabella è un form ..... questo è formalmente sbagliato perchè tra i tag 'figli' di table non esiste form, però comunque l'invio del form funziona perfettamete.

Il problema è che con Jquery non si riesce ad agganciare gli elementi del form, ad esempio con:

$("form#form2 :input")

non vengono trovati gli input, ho provato anche a mettere l'apertura e la chiusura del form all'interno dei <td> ma la cosa non cambia ... qualcuno ha idea di come risolvere?

[cavicchiandrea]

Semantica sbagliata i tr possono contenere solo td e tra un table e un tr non ci deve essere niente pertanto sintassi corretta è cosi:
<table>
<tr><td><form1></form1></td></tr>
<tr><td><form2></form2></td></tr>
etc...
</table>
nei form puoi mettere altre tabelle oppure div a seconda di cosa vuoi usare:
<table>
<tr><td><form1><table><tr><td>......</td></tr></table></form1></td></tr>
<tr><td><form2></form2><div></div></td></tr>
etc...
</table>
lascio ate la gestione jquery

[las]

Grazie della risposta, purtroppo che la semantica era sbagliata l'avevo capito, il problema è che non posso usare quella corretta, perchè graficamente i form non sarebbero allineati ne tra di loro ne con le intestazioni, considera che la prima colonna ha del testo che in ogni riga potrebbe essere di dimensioni diverse.

[cavicchiandrea]

Originariamente inviato da las
..il problema è che non posso usare quella corretta, perchè graficamente i form non sarebbero allineati ne tra di loro ne con le intestazioni...

Liberissimo di fare quello che vuoi, ma stravolgere la semantica perché graficamente non è come lo vuoi lo trovo sbagliato perché:
A) Grafica sbagliata si risolve con css:
B) Non tutti i browser se inserisci un form dove non ci può stare fanno funzionare quest'ultimo (a memoria mi sembra IE)
oltretutto come tu stesso hai riscontrato anche Jquery non funziona se la semantica è sbagliata

[las]

Originariamente inviato da cavicchiandrea
Liberissimo di fare quello che vuoi, ma stravolgere la semantica perché graficamente non è come lo vuoi lo trovo sbagliato perché:
A) Grafica sbagliata si risolve con css:
B) Non tutti i browser se inserisci un form dove non ci può stare fanno funzionare quest'ultimo (a memoria mi sembra IE)
oltretutto come tu stesso hai riscontrato anche Jquery non funziona se la semantica è sbagliata

Perdonami, forse non mi sono spiegato bene, quello che chiedo non è certo come costruire una nuova semantica tutta mia ..... sarei un pazzo;
Io voglio usare la semantica giusta, quello che chiedo a voi è appunto come ci si comporta in questi casi, ovvero come si fa a ottenere i form allineati correttamente e con la semantica giusta, non credo che sia un problema inusuale, penso che sia abbastanza comune mettere dei form uno sotto l'altro, possibile che non esista un modo per allinearli correttamente? eventualmente anche non usando le tabelle, basta che i campi siano allineati uno sotto l'altro, vedo che tu in effetti mi suggerisci i css, mi puoi fare un esempio di come potrei strutturare la cosa?

[las]

ok ci sono quasi, ho creato una tabella con i div con questa struttura:

<style type="text/css">
.tabellaDiv {
	width:auto;
	height:auto;
	display: table;
	border: 1px solid #f00;
	
}
.rigaDiv {
	width:auto;
	height:auto;
	display:table-row;
	border: 1px solid #0f0;
}
.cellaDiv {
	width:auto;
	height:auto;
	display:table-cell;
	border: 1px solid #00f;
}
</style>
<div class="tabellaDiv">
	<div class="rigaDiv">

		<div class="cellaDiv">
			testo
		</div>

		<div class="cellaDiv">
		    <form name="form1" id="form1" action="pagina.php" >	
                    <input type="text" name="nome" value="" />
		</div>

		<div class="cellaDiv">
			<input type="submit" name="Invia" value="Invia" />
                        </form>
		</div>

	</div>
	<div class="rigaDiv">

		<div class="cellaDiv">
			testo
		</div>

		<div class="cellaDiv">
		    <form name="form2" id="form1" action="pagina.php" >	
                    <input type="text" name="nome" value="" />
		</div>

		<div class="cellaDiv">
			<input type="submit" name="Invia" value="Invia" />
                        </form>
		</div>

	</div>
</div>

graficamente viene visualizzato tutto perfettamente ma Jquery comunque non riesce ad agganciare gli elementi del form, lo fa solo se sposto l'apertura e la chiusura del form fuori dal div "rigaDiv" ..... il che però mi sfasa tutta la visualizzazione e sono punto e a capo