Вот jsFiddle, который берет ваши HTML-данные и составляет из них таблицу: http://jsfiddle.net/jfriend00/RKBAj/.
Делая эти предположения:
- Каждый элемент верхнего уровня в документе является продуктом
- У каждого элемента верхнего уровня есть идентификатор, представляющий название продукта
- Каждый интервал в div верхнего уровня - это месяц
- Каждый диапазон в div верхнего уровня имеет класс, представляющий название продукта
- innerHTML диапазона - это данные для этого продукта / месяц
- Имена продуктов могут быть любыми (хотя они должны быть сделаны только из наших допустимых символов для идентификатора CSS).
- Названия месяцев могут быть любыми (хотя они должны быть сделаны только из наших допустимых символов для класса CSS).
- Может быть столько месяцев и продуктов, сколько вы хотите.
- Каждый продукт может иметь любое количество месяцев.
- Все продукты не обязательно должны иметь одинаковые месяцы.
Затем, вот как вы можете перебирать данные и собирать все данные в организованную структуру данных, из которой вы можете построить таблицу.
// iterate over divs which we assume are products
var allProducts = [];
var allMonthsOrder = [];
function parseData() {
$("body > div").each(function() {
var allMonthsKey = {};
var product = {};
product.name = this.id;
product.months = {};
// now iterate each month in this product
$("span", this).each(function() {
var month = this.className;
product.months[month] = this.innerHTML;
// add unique months to the month array (only if we haven't seen it before)
if (!allMonthsKey[month]) {
allMonthsKey[month] = true;
allMonthsOrder.push(month); // store these in order encountered
}
});
allProducts.push(product);
});
}
// data is stored now in allProducts array
// one array element for each product
// each product is an object with a .name attribute and a .months attribute
// each .months attribute is an object where each attribute is a month name and the data for that month
Данные хранятся так:
allProducts = [
{
"name": "coat",
"months": {"Jan2011-Sales": "10", "Feb2011-Sales": "10", "Mar2011-Sales": "10"},
]
},
{
"name": "boot",
"months": {"Jan2011-Sales": "10", "Feb2011-Sales": "10", "Mar2011-Sales": "10"},
},
{
"name": "hat",
"months": {"Jan2011-Sales": "10", "Feb2011-Sales": "10", "Mar2011-Sales": "10"},
}
];
И это один из способов создания таблицы из данных. Сложность создания таблицы заключается в том, что если у какого-либо продукта может быть любое количество месяцев, а у всех продуктов не обязательно одинаковые месяцы, то вам нужно составить строку для каждого существующего месяца и заполнить данные о продукте, если он имеет данные за этот месяц.
function createTable() {
var i, j, product, month;
var html = "<table><tr>";
// iterate over the product names to make the header row
html += "<th>Month</th>";
for (i = 0; i < allProducts.length; i++)
html += "<th>" + allProducts[i].name + "</th>";
}
html += "</tr">
// now create all the rows. First column is month, then each column after that is the sales for
// a given month for a particular product (one product per columnn)
for (i = 0; i < allMonthsOrder.length; i++) {
month = allMonthsOrder[i];
html += "<tr>" + "<td>" + month + "</td>";
// iterate through each product and find if it has data for this month
for (j = 0; j < allProducts.length; j++) {
product = allProducts[j];
html += "<td>";
if (product.months[month]) {
html += product.months[month];
}
html += "</td>";
}
html += "</tr>";
}
html += "</table>";
}