Hola, habría dos situaciones a contemplar para recorrer las filas de una tabla html.
El primer caso, sería que la tabla fuera una tabla estática que se carga en una dirección web, en ese caso lo único que necesitamos es recorrerlas cargándola usando php por ejemplo. El código que puede servir para tomar la idea puede ser este:
$DOM = new DOMDocument();
$DOM->loadHTMLFile("file path or url");
$rows = $DOM->getElementsByTagName("tr");
for ($i = 0; $i < $rows->length; $i++) {
$cols = $rows->item($i)->getElementsbyTagName("td");
for ($j = 0; $j < $cols->length; $j++) {
echo $cols->item($j)->nodeValue, "\t";
// you can also use DOMElement::textContent
// echo $cols->item($j)->textContent, "\t";
}
echo "\n";
}
El segundo caso, sería recorrer una tabla que fuera dinámica que es manipulada por el usuario y en un momento dado se necesita procesar del lado del servidor. Esto podría hacerse con JavaScript y Ajax (ver los cursos de referencia) pero hay más opciones.
Voy a citar la opción jquery que llevaría estos pasos
1) Usar jquery para leer los valores en la tabla html. El ejemplo se refiere a una tabla que tiene 4 columnas que son task no., date, description y task.
$('#sampleTbl tr').each(function(row, tr){
TableData = TableData
+ $(tr).find('td:eq(0)').text() + ' ' // Task No.
+ $(tr).find('td:eq(1)').text() + ' ' // Date
+ $(tr).find('td:eq(2)').text() + ' ' // Description
+ $(tr).find('td:eq(3)').text() + ' ' // Task
+ '\n';
});
2) Guardar los valores html leídos de la tabla en un array multidimensional javascript
var TableData = new Array();
$('#sampleTbl tr').each(function(row, tr){
TableData[row]={
"taskNo" : $(tr).find('td:eq(0)').text()
, "date" :$(tr).find('td:eq(1)').text()
, "description" : $(tr).find('td:eq(2)').text()
, "task" : $(tr).find('td:eq(3)').text()
}
});
TableData.shift(); // first row is the table header - so remove
3) Convertir el array javascript a formato json
var TableData;
TableData = storeTblValues()
TableData = $.toJSON(TableData);
function storeTblValues()
{
var TableData = new Array();
$('#sampleTbl tr').each(function(row, tr){
TableData[row]={
"taskNo" : $(tr).find('td:eq(0)').text()
, "date" :$(tr).find('td:eq(1)').text()
, "description" : $(tr).find('td:eq(2)').text()
, "task" : $(tr).find('td:eq(3)').text()
}
});
TableData.shift(); // first row will be empty - so remove
return TableData;
}
4) Enviar los datos json
var TableData;
TableData = $.toJSON(storeTblValues());
$.ajax({
type: "POST",
url: "processJSONarray.php",
data: "pTableData=" + TableData,
success: function(msg){
// return value stored in msg variable
}
});
En este último paso los datos se envían al servidor con el método POST, y la respuesta obtenida vienen en la variable msg
5) Procesar los datos json con php
// Unescape the string values in the JSON array
$tableData = stripcslashes($_POST['pTableData']);
// Decode the JSON array
$tableData = json_decode($tableData,TRUE);
// now $tableData can be accessed like a PHP array
echo $tableData[1]['description'];
Una vez que el array ha sido procesado por la función json_decode, el array puede accederse como un array php cualquiera. Por ejemplo $tableData[1]['description']; nos devolverá el valor de la descripción de una fila de la tabla.
Saludos
Tema: Introducir datos número variable desde tabla HTML y hacer query en mysql (Leído 4342 veces)
RSS -
WAP2