Get table data from with post method - php

Question

I've been working in a project where I need to dynamically fill a table according with what I select from two combobox, so the problem is that I need to take those values to save them on the database but I can't find a way to do this.
The code when I press the button:
<input type="button" name="btnAgregarPrograma" value="Agregar" onClick="addRow()"/>
function addRow()
{
var dep = $("#cbxDependencia").val();
var pro = $("#cbxPrograma").val();
if(dep == 0 || pro == 0)
alert('Debe seleccionar una dependencia y un programa para poder agregarlos'); //Traslation: you must select a dependency and a program to continue
else
{
$.get("funciones/agregarProDep.php",{pro: pro},
function(resultado)
{
if(resultado == false)
{
alert("Error");
}
else
{
$("#table_depProg").attr("disabled",false);
var row = $("<tr>" + resultado + "</tr>");
$('#table_depProg').append(row);
}
}
);
}
}
As you can see, the code above calls a php file with the next code
<?php
include("funciones.php");
$pro = 0;
$programas = agregarProgramaDependencia($_GET["pro"]);
foreach($programas as $fila)
{
echo ("
<td id=".$fila['idPrograma'].">".$fila['Nombre']."</td>
<td><input type='button' value='Eliminar' onclick='borrarFila(this)'</td>
");
}
?>
That's the way I fill the table, but now I just can't find a way to get the contained data when I submit the page to get and save the data, I would apreciate any help.
I tried to explain the best I could, if something is not clear just let me know and I will answer back with a better explanation.

Answer 1

I know this is an old question, but I ran into the same thing and here is what I did.
Created a DataRow object that contained the fields of each row
Iterated through the table's rows (skipping the header) and stored each row in a DataRow and pushed it onto an Array.
Used JSON.Stringify to convert the Array to JSON
Stored the JSON in a <input type="hidden"> so it would get POSTed.
Here is the HTML example:
<table border="2px solid black">
<tr id="header-row">
<th>Dx Code</th>
<th>Dx Date</th>
<th>OnSet Or Ex</th>
</tr>
<tr>
<td>3022</td>
<td>1/1/2014</td>
<td>ONSET</td>
</tr>
<tr>
<td>V9099</td>
<td>1/21/2014</td>
<td>EX</td>
</tr>
<tr>
<td>1199</td>
<td>1/31/2014</td>
<td>ONSET</td>
</tr>
</table>
<br />
<input type="button" value = "Submit" id="out">
JavaScript:
// object to hold your data
function dataRow(value1,value2,value3) {
this.dxCode = value1;
this.dxDate = value2;
this.dxType = value3;
}
$('#out').click(function(){
// create array to hold your data
var dataArray = new Array();
// iterate through rows of table
// * Start from '2' to skip the header row *
for(var i = 2; i <= $("table tr").length; i++){
// create object and push to array
dataArray.push(
new dataRow(
$("table tr:nth-child(" + i + ") td").eq(0).html(),
$("table tr:nth-child(" + i + ") td").eq(1).html(),
$("table tr:nth-child(" + i + ") td").eq(2).html())
);
}
var sJson = JSON.stringify(dataArray);
alert(sJson);
})
Finally, JSFiddle to see it: http://jsfiddle.net/leisenstein/vy3ux/