Javascript 反转HTML网格数据_Javascript_Jquery

Javascript 反转HTML网格数据

javascript jquery

Javascript 反转HTML网格数据,javascript,jquery,Javascript,Jquery,我有一个html网格表，它在js文件中创建表，如下所示 tbl_html = tbl_html + '<tbody>' + '<td>' + yearconvert(yearr) + '</td>' + '<td>' + starttime+ '</td>' + '<td&g

我有一个html网格表，它在js文件中创建表，如下所示

   tbl_html = tbl_html + '<tbody>' +

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

tbl_html=tbl_html+“”+
''+yearconvert（year）+''+
''+starttime+''+
''+结束时间+''；

有一个循环给出了年、开始时间和结束时间的值。它显示得很好，但我想逆转我在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;
}

for（变量i=0；i



我想看到最后一行将是第一行，其他如下
例如，2009年11月-2009年10月-2009年9月-2009年8月
[edit]也就是说，我只想更改行顺序，不想更改列[/edit]
有什么想法可以实现吗
谢谢
你能不能不编辑JS
tbl_html = tbl_html + '<tbody>' +
                     '<td>' + starttime + '</td>' +
                     '<td>' + endtime+ '</td>' +
                     '<td>' + yearconvert(yearr) + '</td>';

tbl_html=tbl_html+“”+
''+starttime+''+
''结束时间+''时+
''+yearconvert（year）+''；
倒着看矩阵怎么样
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>';
    } 

（var i=matrix.length-1；i>=0；i--）的{
var starttime=Date.UTC（parseInt（矩阵[i]。开始时间）；
var endtime=Date.UTC（parseInt（矩阵[i-1]）；
var年=矩阵[i]。年；
tbl_html=tbl_html+“”+
''+yearconvert（year）+''+
''+starttime+''+
''+结束时间+''；
} 
试试这个尺码：
基本上，我们只是遍历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>


函数byId（e）{returndocument.getElementById（e）；}
函数newEl（tag）{returndocument.createElement（tag）；}
函数newText（txt）{return document.createTextNode（txt）；}
window.addEventListener（'load'，onDocLoaded，false）；
函数makeTable（）
{
var table=newEl（“table”）；
table.id='myTable'；
var tbody=newEl（“tbody”）；
表3.儿童（t身体）；
var tr=newEl（'tr'）；
var i，j，n=3；
对于（i=0；ivar griddatayear=reversegridarray（arrayyear）；
var griddatastart=reversegridarray（arraystart）；
var griddataend=reversegridarray（arrayend）；
var griddatadur=反向排列（排列时效）；
变量大小；
功能反转阵列（gridarr）{
var gridarrayresult=[]；
var myres；
ii=网格长度；
对于（变量i=ii-1；i>=0；i--）{
gridarrayresult.push（gridarr[i]）；
}
size=gridarrayresult.slice（0.sort（）.indexOf（未定义）；
myres=gridarrayresult.filter（函数（e）{returne}）；
返回myres；
}
对于（变量i=0；i

问题已解决
请澄清您希望最终结果是什么样的。我编辑了我的描述如果您想反转表格，只需将for
语句切换为for（var I=matrix.length-1；I>=0；I--）
当然可以，但是您尝试了什么？您可以使用所有可能包含其他html元素的insertBefore
方法来实现这一点。@user2407340-即使您的注释也有点含糊不清。也就是说，您键入的英语比我键入的母语要好。正如其他人所说，只需按照至少您需要它。但是如果您想在它存在后重新排序，请使用insertBefore
方法。您需要获取对tbody元素的引用。然后您可以使用insertBefore将每一行附加到当前为tbody.childNodes[1]的项目之前的tbody中。（0索引标题行）我将编写一个解决方案。我只想更改行顺序，但不想更改列顺序。抱歉，伙计，不幸的是，我弄错了。不过，似乎有了更多信息，您就可以更轻松地完成这项工作，我们可以帮助您完成这项工作。这样做，甚至只需在末尾而不是开头添加tbl_html。矩阵[I-1]）；将是一个问题。您告诉我们您的部分代码“显示得很好”，尽管matrix[i]
显然是一个对象而不是一个数字。当前代码工作正常，但我想更新它，这就是我键入它的原因。我的观点是，我们缺少足够的信息来更正matrix[i-1]
，因为您几乎没有告诉我们矩阵
包含什么。我只能猜测矩阵[I]。结束时间将是正确的选择。
        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>';

    }