2012-03-06 194 views
13

Me gustaría preguntar si es posible convertir una TABLA HTML en matriz en javascript? Tengo esta mesa. No he intentado nada todavía.Convertir tabla html a matriz en javascript

<table id="cartGrid"> 
    <thead> 
     <tr> 
      <th>Item Description</th> 
      <th>Qty</th> 
      <th>Unit Price</th> 
      <th>Ext Price</th> 
     </tr> 
    </thead> 
<tbody> 
    <tr><td>Old Lamp</td><td>1</td><td>107.00</td><td>107.00</td> 
    <tr><td>Blue POst</td><td>2</td><td>7.00</td><td>14.00</td> 
</tbody> 
</table> 
+0

sí. Bien, ahora muéstranos un código, qué has intentado o cómo se ve la tabla. – f0x

+0

¿Una matriz de qué? Los elementos que componen la tabla, los valores dentro de las celdas? – kinakuta

+0

Sí, al escribir un código :) (¡que recorre sus filas y columnas!) – linuxeasy

Respuesta

32

Aquí hay un ejemplo de hacer lo que quiera.

var myTableArray = []; 

$("table#cartGrid tr").each(function() { 
    var arrayOfThisRow = []; 
    var tableData = $(this).find('td'); 
    if (tableData.length > 0) { 
     tableData.each(function() { arrayOfThisRow.push($(this).text()); }); 
     myTableArray.push(arrayOfThisRow); 
    } 
}); 

alert(myTableArray); 

Probablemente se podría ampliar esto, por ejemplo, usando el texto de la TH para crear en su lugar un par clave-valor para cada TD.

Dado que esta aplicación utiliza una matriz multidimensional, puede acceder a una fila y una anotación haciendo algo como esto:

myTableArray[1][3] // Fourth td of the second tablerow 

Editar: Aquí está un violín por su ejemplo: http://jsfiddle.net/PKB9j/1/

+1

Querrá ser más específico con su selector que "tabla tr", especialmente si está usando tablas para el diseño en cualquier lugar, ya que esto encontrará todos los tr (posiblemente dentro de otras tablas anidadas) que están dentro de una mesa. Dado el HTML actualizado, el selector sería '$ ('# cartGrid')'. – GregL

+0

Naturalmente. Es solo un ejemplo. Lo actualizaré para mayor claridad. –

+0

Sí, lo sé. Pero parece que el OP no estaba muy seguro con JS y jQuery, lo cual está bien, pero quería señalarlo en caso de que solo copien y peguen el código y obtengan resultados totalmente inesperados si utilizan tablas anidadas para diseño. – GregL