javascript - 如何用垂直和水平结果填充表格？

Question

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

此表是动态的，并且会实时填充。这是我的 JS 代码，但逻辑无法正常工作。我需要告诉它每 2 列是一个新记录，并且每 4 列创建一个新行。这是我到目前为止所拥有的：

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;
}

显然上面的代码是完全错误的，但这就是我到目前为止所拥有的。如果我能得到 mod 逻辑，我可以填空。

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)
    ]);
});

奇怪的表

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>';
}