Как заполнить таблицу вертикальными и горизонтальными результатами?

Question

HeaderA HeaderB HeaderA HeaderB 
stuff 232  hey  3434 
world 033  boy  221 
bat  435  girl 930 

Эта таблица динамична и заселена в живую. Вот мой JS-код, но логика работает некорректно. Мне нужно сказать, что каждые 2 столбца являются новой записью и делают новую строку каждый четвертый столбец. Вот что у меня есть до сих пор:

function html_data(data) { 
    var html = ''; 

    $.each(data, function (index, value) { 
    if ((index+1) % 4 == 0 && index != 0) { 
     html += '<td>'+value+'</td>'; 
     html += '</tr>' 
    } else if ((index+1) % 5 == 0) { 
     html += '<tr>'; 
     html += '<td>'+value+'</td>'; 
    } else { 
     html += '<td>'+value+'</td>'; 
    } 
     html += '</tr>'; 
    }); 

    return html; 
} 

Очевидно, что приведенный выше код совершенно неверен, но это все, что у меня есть до сих пор. Если я смогу получить логику мод, я могу заполнить пробелы. Большая помощь приветствуется.

Answer 1

Попробуйте этот http://jsfiddle.net/G3JK5/

HTML

<table id="table"> 
    <tr> 
     <th>HeaderA</th> 
     <th>HeaderB</th> 
     <th>HeaderA</th> 
     <th>HeaderB</th> 
     <th>HeaderA</th> 
     <th>HeaderB</th> 
    </tr> 
</table> 
<input type="button" id="btn" value="Add some random data" /> 

Javascript

//Sample usage 
var tbl = new weirdTable('table'); 

document.getElementById('btn').addEventListener('click', function(){ 
    tbl.addData([ 
     parseInt(Math.random() * 100), 
     parseInt(Math.random() * 100) 
    ]); 
}); 

weirdTable

function weirdTable(tableId){ 
    var _me = null; 

    var _currentIndex = 0; 
    var _colCount  = 0; 
    var _lastRowIndex = 0; 

    var construct = function(tableId){ 
     _me = document.getElementById(tableId); 
     _colCount = _me.rows[0].cells.length; 
     _currentIndex = _colCount; 
    }; 

    this.addData = function(data){ 
     var row = _me.rows[_lastRowIndex]; 

     //or var data = arguments; 
     for(var i = 0; i < data.length; i++){ 
      if(_currentIndex >= _colCount){ 
       _lastRowIndex++; 
       _currentIndex = 0; 
       row = _me.insertRow(_lastRowIndex); 
      }   

      row.insertCell(_currentIndex).innerText = data[i]; 
      _currentIndex++; 
     } 
    }; 

    construct(tableId); 
} 

Answer 2

Если я что-то отсутствует, вы можете просто сделать это:

if (index%4===0) { // start of a row 
    html += '<tr>'; 
} 
html += '<td>'+value+'</td>'; 
if (index%4===3) { // end of row 
    html += '</tr>'; 
}