CODEWITHSUNDEEP
javascriptjquery
one1day
one1day

Reputation: 139

Reversing HTML grid data

I have a html grid table which creates the table in js file and looks like this

   tbl_html = tbl_html + '<tbody>' +

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

There is a loop which gives the value of year ,starttime ,endtime . It displays it well but I want to reverse the result which I see in html grid . 

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

I want to see last row will be the first row and others as follow for example year , 11/2009 - 10/2009 - 09/2009 - 08/2009

[edit] That is to say, I only want to change the row order but not the column [/edit]

Any idea to achieve it ?

Thanks

Upvotes: 0

Views: 138

Answers (4)

one1day
one1day

Reputation: 139

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

    }

issue is resolved

Upvotes: 0

enhzflep
enhzflep

Reputation: 13089

Try this on for size:

Basically, we just iterate through the rows collection of the tbody element. We insert rows with an increasing index before whichever row is the first one containing data. If the table has a header, the first data row is rows[1] - if the table doesn't have a header, the first data row is rows[0]. The row that we need to insert before is constantly changing, so we have to get a reference to it each time through the loop. Fortunately, the index remains the same - hence the use of tbody.rows[firstRowIndex] -whose contents do change, even though at first glance this may be erroneously seen as constant.

<!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>

Upvotes: 0

Barbara Laird
Barbara Laird

Reputation: 12717

How about going through the matrix backwards?

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

Upvotes: 2

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

Could you not just edit the JS

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

Upvotes: 0

Related Questions