Recorrer filas de tabla y guardar valores en un hidden

[cRz87]

Buentas tardes, mi consulta es la siguiente:
Tengo una tabla en html que no tiene un tamaño en concreto, éste depende de las filas que necesite el usuario a la hora de introducir campos.
Creé un botón que iba añadiendo filas.

Hasta ahi bien, el problema viene cuando quiero recorrer las x filas que tenga la tabla y guardar esos campos en unos campos hidden que tengo, para más tarde enviarlos mediante php.

Si tengo una fila es muy fácil, el problema es cuando hay más.
No sé si me expliqué bien, espero ayuda de profesionales porque ando verde.

Saludos y gracias!

[cRz87]

Perdonad, este es el código que tengo:


<script language=javaScript1.2>

function subir(x) {
var misFilas = document.getElementById("cuerpoTabla");
var soy = x.parentNode.parentNode; // etiqueta tr
var miSitio = soy.rowIndex;
if (miSitio == (misFilas.parentNode.rows.length - 1)) return;// última fila

if (miSitio == 0) { // cambiamos los colores de las flechas
misFilas.parentNode.rows[0].getElementsByTagName("b")[1].style.color = "blue";
misFilas.parentNode.rows[1].getElementsByTagName("b")[1].style.color = "#eeeeee";
}

if ((miSitio + 2) == (misFilas.parentNode.rows.length)) {
misFilas.parentNode.rows[miSitio + 1].getElementsByTagName("b")[0].style.color = "blue";
x.style.color = "#eeeeee";
}

var clon1 = soy.cloneNode(true);
var clon2 = misFilas.parentNode.rows[miSitio + 1].cloneNode(true);

misFilas.replaceChild(clon2, misFilas.rows[miSitio]);
misFilas.replaceChild(clon1, misFilas.rows[miSitio + 1]);
}

function bajar(x) {
var misFilas = document.getElementById("cuerpoTabla");
var soy = x.parentNode.parentNode; // etiqueta tr
var miSitio = soy.rowIndex;
if (miSitio == 0) return;// última fila

if (miSitio == 1) { // cambiamos los colores de las flechas
misFilas.parentNode.rows[0].getElementsByTagName("b")[1].style.color = "blue";
x.style.color = "#eeeeee";
}

if ((miSitio + 1) == (misFilas.parentNode.rows.length)) {
misFilas.parentNode.rows[miSitio].getElementsByTagName("b")[0].style.color = "blue";
misFilas.parentNode.rows[miSitio - 1].getElementsByTagName("b")[0].style.color = "#eeeeee";
}


var clon1 = soy.cloneNode(true);
var clon2 = misFilas.parentNode.rows[miSitio - 1].cloneNode(true);

misFilas.replaceChild(clon2, misFilas.rows[miSitio]);
misFilas.replaceChild(clon1, misFilas.rows[miSitio - 1]);
}

function suma() {
var miTabla = document.getElementById("cuerpoTabla");
var lasCeldas = miTabla.getElementsByTagName("tr");
var fila = document.createElement("tr");
var celda1 = document.createElement("td");
var celda2 = document.createElement("td");
var celda3 = document.createElement("td");
var celda4 = document.createElement("td");
var celda5 = document.createElement("td");
var celda6 = document.createElement("td");
var celda7 = document.createElement("td");

celda1.innerHTML = "<input type='text' name='fldcodi'>";
celda2.innerHTML = "<input type='text' name='fldarticle'>";
celda3.innerHTML = "<input type='text' name='fldorigen'>";
celda4.innerHTML = "<input type='checkbox' name= 'chkgroc'>";
celda5.innerHTML = "<input type='text' name='fldpreu'>";
celda6.innerHTML = "<input type='text' name='fldoferta'>";
celda7.innerHTML = "<input type='text' name='fldpromocio'>";
celda7.innerHTML +="<b style='color: #eeeeee' onclick=subir(this)>&darr;</b>" + "<b onclick=bajar(this)>&uarr;</b>" + "<input type=button value=- onclick=restar()/>" + "<input type=checkbox id='borra'>";

lasCeldas[lasCeldas.length - 1].getElementsByTagName("b")[0].style.color = "blue";
fila.appendChild(celda1);
fila.appendChild(celda2);
fila.appendChild(celda3);
fila.appendChild(celda4);
fila.appendChild(celda5);
fila.appendChild(celda6);
fila.appendChild(celda7);
miTabla.appendChild(fila);
}

function enviar(){
var hid1 = document.getElementById("fldCodiArticles");
var hid2 = document.getElementById("fldArticles");
var hid3 = document.getElementById("fldOrigens");
var hid4 = document.getElementById("fldColors");
var hid5 = document.getElementById("fldPreus");
var hid6 = document.getElementById("fldOfertes");
var hid7 = document.getElementById("fldPromocions");

nMax = misFilas.getElementsByTagName('td').length;
for(i = 0; i < nMax; i++){

var camp1 = document.getElementById("fldcodi");
hid1.value+= camp1.value + ",";
var camp2 = document.getElementById("fldarticle");
hid2.value+= camp2.value + ",";
var camp3 = document.getElementById("fldorigen");
hid3.value+= camp3.value + ",";
var camp4 = document.getElementById("chkgroc");
if (camp4.checked) {
hid4.value += "Groc,";
} else {
hid4.value += "No Groc,";
}
var camp5 = document.getElementById("fldpreu");
hid5.value+= camp5.value + ",";
var camp6 = document.getElementById("fldoferta");
hid6.value+= camp6.value + ",";
var camp7 = document.getElementById("fldpromocio");
hid7.value+= camp7.value + ",";
}
}
</script>
</head>
<body>
<br />
<br />
<table border=1 align="center">
<tr id="headCabecera">
<th id="t1r1c1" width="90px">Per:</th>
<td id="t1r1c2" width="250px"><input type="text" name="fldnomBotiga"></input></td>
<th id="t1r1c3" width="90px">De:</th>
<td id="t1r1c4" width="250px"><input type="text" name="fldresponsable"></input></td>
</tr>
<tr id=r2>
<th id="t1r2c1" width="90px">Assumpte:</th>
<td id="t1r2c2" width="250px">CANVI DE PREUS</td>
<th id="t1r2c3" width="90px">Pel Dia:</th>
<td id="t1r2c4" width="250px"></td>
</tr>
</table>
<br />
<table id=unaTabla align="center">

<tbody id=cuerpoTabla>
<tr id="headArticles">
<th id=c1>Codi</th>
<th id=c2>Article</th>
<th id=c3>Origen</th>
<th id=c4>Groc</th>
<th id=c5>Preu</th>
<th id=c6>Oferta</th>
<th id=c7>Promoció</th>
<th id=c8><input type="button" value="+" onclick=suma() /></th>
</tr>
<tr id=a1>
<td id="t2r1c1"><input type="text" name="fldcodi" id="fldcodi" value="<?php echo $fldcodi ?>"></input></td>
<td id="t2r1c2"><input type="text" name="fldarticle" id="fldarticle" value="<?php echo $fldarticle ?>"></input></td>
<td id="t2r1c3"><input type="text" name="fldorigen" id="fldorigen" value="<?php echo $fldorigen ?>"></input></td>
<td id="t2r1c4"><input type="checkbox" name="chkgroc" id="chkgroc" value="groc" checked></input></td>
<td id="t2r1c5"><input type="text" name="fldpreu" id="fldpreu" value="<?php echo $fldpreu ?>"></input></td>
<td id="t2r1c6" valign="middle"><input type="text" name="fldoferta" id="fldoferta" value="<?php echo $fldoferta ?>"></input></td>
<td id="t2r1c7"><input type="text" name="fldpromocio" id="fldpromocio" value="<?php echo $fldpromocio ?>"/><b onclick="subir(this)">&darr;</b><b style="color: #eeeeee" onclick="bajar(this)">&uarr;</b><input type="button" value="-" onclick="restar()" /><input type=checkbox id="borra"></td>
</tr>
</table>
<br />
<form action="index.php" method="post">
<input type="text" id="fldCodiArticles"/><br></br>
<input type="text" id="fldArticles"/><br></br>
<input type="text" id="fldOrigens"/><br></br>
<input type="text" id="fldColors"/><br></br>
<input type="text" id="fldPreus"/><br></br>
<input type="text" id="fldOfertes"/><br></br>
<input type="text" id="fldPromocions"/><br></br>
</form>
<br />
<br />
<br />
<br />
<button type="submit" onclick=enviar()>OK</button>
</body>
</html>

[zerokilled]

buenas,
no he revisado el código con lujo de detalles. sin embargo, para la que quieres puedes hacerlo de multiples formas: desde navegador por los nodos childNodes, navegar por las filas y celdas, hasta capturar todos los campos de la tabla. en tu caso particular, puedes usar la función getElementsByName ya que los campos tienen el mismo nombre para cada columna. es decir, los campos de la columna Origen se llaman fldorigen. luego iteras la colección devuelta por la función haciendo lo necesario. probablemente necesites repetir este proceso para el resto de las columnas ya que eso es lo que parece que deseas hacer.

[cRz87]

Gracias por contestar tan rápido, me parece muy buena la idea que me comentas, creo que es lo que buscaba.
Lo he intentado y he puesto este código:

function enviar(){
var hid1 = document.getElementById("fldCodiArticles");
var hid2 = document.getElementById("fldArticles");
var hid3 = document.getElementById("fldOrigens");
var hid4 = document.getElementById("fldColors");
var hid5 = document.getElementById("fldPreus");
var hid6 = document.getElementById("fldOfertes");
var hid7 = document.getElementById("fldPromocions");

var codi = document.getElementsByName("fldcodi");
hid1.value+= codi.value + ",";
var article = document.getElementsByName("fldarticle");
hid2.value+= article.value + ",";
var origen = document.getElementsByName("fldorigen");
hid3.value+= origen.value + ",";
var groc = document.getElementsByName("chkgroc");
if (groc.checked) {
hid4.value += "Groc,";
} else {
hid4.value += "No Groc,";
}
var preu = document.getElementsByName("fldpreu");
hid5.value+= preu.value + ",";
var oferta = document.getElementsByName("fldoferta");
hid6.value+= oferta.value + ",";
var promocio = document.getElementsByName("fldpromocio");
hid7.value+= promocio.value + ",";
}

Al llamar a la función enviar, en cada hidden me dice undefined...
En que fallo?
Saludos y gracias de nuevo

[zerokilled]

fijate que getElementsByName devuelve una colección de elementos. un tipo de dato que estructuralmente es parecido a un array. es decir, tiene indices y cada uno hace referencia a todos los elementos capturados por el nombre indicado. tienes que recorrer por cada colección para poder extraer el contenido de cada uno de los elementos.

[cRz87]

Supongo que tendré que hacer un for para cada campo de la tabla y que vaya recogiendo todos los campos de cada columna y los guarde en el hidden, pero no se como empezar..
Me echas una mano compañero?