Question

我有一个html网格表，它在js文件中创建表，看起来像这样

   tbl_html = tbl_html + '<tbody>' +

                         '<td>' + yearconvert(yearr) + '</td>' +
                         '<td>' + starttime+ '</td>' +
                         '<td>' + endtime + '</td>';

有一个循环给出year，starttime，endtime的值。它显示得很好，但我想反转我在html网格中看到的结果。

for (var i = 0; i < matrix.length; i++) {
    var starttime= Date.UTC(parseInt(matrix[i].start_time);
    var endtime = Date.UTC(parseInt(matrix[i -1]);
    var year =matrix[i].year;
}

enter image description here

我想看到最后一行是第一行，其他行如下例如，年份，2009年11月 - 10/2009 - 09/2009 - 08/2009

[edit]也就是说，我只想更改行顺序而不是列[/ edit]

有任何想法实现它吗？

由于

Answer 1

如何向后浏览矩阵？

for (var i = matrix.length-1; i >= 0; i--) {
        var starttime= Date.UTC(parseInt(matrix[i].start_time);
        var endtime = Date.UTC(parseInt(matrix[i -1]);
        var year =matrix[i].year;

    tbl_html = tbl_html + '<tbody>' +

                             '<td>' + yearconvert(yearr) + '</td>' +
                             '<td>' + starttime+ '</td>' +
                             '<td>' + endtime + '</td>';
    }

Answer 2

你能不能只编辑JS

tbl_html = tbl_html + '<tbody>' +
                     '<td>' + starttime + '</td>' +
                     '<td>' + endtime+ '</td>' +
                     '<td>' + yearconvert(yearr) + '</td>';

Answer 3

尝试使用此尺寸：

基本上，我们只是遍历tbody元素的rows集合。我们在第一个包含数据的行之前插入具有递增索引的行。如果表有标题，则第一个数据行是行[1] - 如果表没有标题，则第一个数据行是行[0]。我们之前需要插入的行是不断变化的，所以我们必须在每次循环时获得它的引用。幸运的是，索引保持不变 - 因此使用tbody.rows[firstRowIndex] - 其内容确实会发生变化，即使乍一看这可能会被错误地视为不变。

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}

window.addEventListener('load', onDocLoaded, false);

function makeTable()
{
    var table = newEl('table');
    table.id = 'myTable';
    var tbody = newEl('tbody');
    table.appendChild(tbody);

    var tr = newEl('tr');
    var i, j, n = 3;

    for (i=0; i<n; i++)
    {
        var curCell = newEl('th');
        curCell.appendChild( newTxt('Column ' + i) );
        tr.appendChild(curCell);
    }
    tbody.appendChild(tr);

    for (j=0; j<10; j++)
    {
        tr = newEl('tr');
        for (i=0; i<n; i++)
        {
            var curCell = newEl('td');
            curCell.appendChild( newTxt('Cell: ' + (i + j*n) ) );
            tr.appendChild(curCell);
        }
        tbody.appendChild(tr);
    }
    document.body.appendChild(table);
}

function onDocLoaded()
{
    makeTable();
}

function flipRows(tableId, hasHeaderRow)
{
    var tbl = byId(tableId);
    var tbody = tbl.childNodes[0];
    var i, n;
    n = tbody.rows.length;

    var firstRowIndex = 0;
    if (hasHeaderRow == true)
        firstRowIndex++;

    for (i=firstRowIndex+1; i<n; i++)
        tbody.insertBefore( tbody.rows[i], tbody.rows[firstRowIndex] );
}

</script>
<style>
</style>
</head>
<body>
    <button onclick="flipRows('myTable', true)">Flip rows of this table</button><br>
</body>
</html>

Answer 4

        var griddatayear = reversegridarray(arrayyear);
        var griddatastart = reversegridarray(arraystart);
        var griddataend = reversegridarray(arrayend);
        var griddatadur = reversegridarray(arrayduration);
        var size;
        function reversegridarray(gridarr) {
            var gridarrayresult = [];
            var myres;
            ii = gridarr.length;
            for (var i = ii - 1; i >= 0; i--) {
                gridarrayresult.push(gridarr[i]);
            }
            size=gridarrayresult.slice(0).sort().indexOf(undefined);
            myres = gridarrayresult.filter(function (e) { return e });
            return myres;
        }

        for (var i = 0; i < size ; i++) {


        tbl_html = tbl_html + '<tbody>' +

        //'<td>' + monthsupdated[i] + '</td>' +
      '<td>' + yearconvert(griddatayear[i]) + '</td>' +
                         '<td>' + griddatastart[i] + '</td>' + 
                         '<td>' + griddataend[i] + '</td>' +
                         '<td>' + griddatadur[i] + '</td>';

    }

问题已解决

反转HTML网格数据

4 个答案: