Просто добавлю два моих цента на тему производительности.Для небольших (до 100 строк, например) таблиц использование DIV не окажет большого влияния на производительность.
Если вы хотите генерировать очень длинные наборы данных, с другой стороны, вам нужно просто отказатьсяиспользуйте традиционные таблицы HTML.
Краткое объяснение:
Все это появилось в проекте моей компании, где я написал класс Javascript для процедурного генерирования для меня таблиц на основе данных SQL (это отчетный видмодуль).В любом случае, мне нравятся DIV, поэтому я написал их на основе DIV, очень похоже на пример OP.
После некоторой ужасающей производительности (особенно в IE8) я решил переписать ее, используя только таблицы, так как это довольнопростые табличные данные, в целом.По какой-то причине таблицы на моей машине в Chrome примерно в два раза быстрее.То же самое относится и к Safari.
Тем не менее, поскольку я не могу предоставить код своей работы, я написал небольшую контрольную штуковину, которая позволяет вам попробовать либо методологию, либо.Вы увидите, что они почти идентичны, только один использует div со стилем для имитации стандартного поведения таблицы, а другой - просто таблицу старой школы.
Единственное реальное отличие - это тип элемента.генерируется, так что это единственное, что я могу объяснить в дельте времени.Я уверен, что это зависит от браузера, но мне кажется, что элементы таблицы просто быстрее.
<script type="text/javascript">
var time_start = new Date().getTime();
var NUM_ROWS = 5000;
var NUM_CELLS = 8;
var OLD_STYLE = 1; // toggle 0/1, true/false
if(OLD_STYLE)
{
var table = document.createElement('table');
document.body.appendChild(table);
for(var a = 0; a < NUM_ROWS; a++)
{
var row = document.createElement('tr');
for(var b = 0; b < NUM_CELLS; b++)
{
var cell = document.createElement('td');
cell.innerHTML = 'cell';
row.appendChild(cell);
}
table.appendChild(row);
}
}
else
{
var table = document.createElement('div');
document.body.appendChild(table);
for(var a = 0; a < NUM_ROWS; a++)
{
var row = document.createElement('div');
row.setAttribute('style','display: table-row; padding: 2px;')
for(var b = 0; b < NUM_CELLS; b++)
{
var cell = document.createElement('div');
cell.setAttribute('style','display: table-cell; padding: 2px');
cell.innerHTML = 'cell';
row.appendChild(cell);
}
table.appendChild(row);
}
}
var dt = (new Date().getTime() - time_start)/1000;
console.log( dt + ' seconds' );
</script>