是否有将列显示为行的JavaScript数据表组件？_Javascript_Datatable_Transpose

是否有将列显示为行的JavaScript数据表组件？

javascript

是否有将列显示为行的JavaScript数据表组件？,javascript,datatable,transpose,Javascript,Datatable,Transpose,我想显示一个“翻转”（转置）的数据表。例如，给定一些数据： [{col1:abc，col2:123}，{col1:xxx，col2:321}] 它显示为 +----+----+-+ | col1 | abc | xxx | +----+----+-+ | col2 | 123 | 321 | +----+----+----+ 行的作用应与标准表中的列相同是否有一些JS Ajax组件（如YUI DataTable或类似组件）可以实现这一点？很好的练习。我想这就是你想要的： <!DOCTYP

我想显示一个“翻转”（转置）的数据表。例如，给定一些数据：

[{col1:abc，col2:123}，{col1:xxx，col2:321}]

它显示为

+----+----+-+

| col1 | abc | xxx |

+----+----+-+

| col2 | 123 | 321 |

+----+----+----+

行的作用应与标准表中的列相同

是否有一些JS Ajax组件（如YUI DataTable或类似组件）可以实现这一点？

很好的练习。我想这就是你想要的：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Transposed table</title>
</head>
<body>
  <div id="wrapper"></div>
  <script>
    var tableData = [{col1: "abc", col2: 123},
                     {col1: "xxx", col2: 321}];

    function rotateData(theTable) {
        var result = [], i, j, key, keyFound;

        for (i = 0; i < theTable.length; ++i) {
            for (key in theTable[i]) {
                /* now loop through result[] to see if key already exists */
                keyFound = false;

                for (j = 0; j < result.length; ++j) {
                    if (result[j][0] == key) {
                        keyFound = true;
                        break;
                    }
                }

                if (!keyFound) {
                    result.push([]);  // add new empty array
                    result[j].push(key);  // add first item (key)
                }

                result[j].push(theTable[i][key]);
            }
        }

        return result;
    }

    function buildTable(theArray) {
        var html = [], n = 0, i, j;

        html[n++] = '<table>';

        for (i = 0; i < theArray.length; ++i) {
            html[n++] = '<tr>';
            for (j = 0; j < theArray[i].length; ++j) {
               html[n++] = '<td>';
               html[n++] = theArray[i][j];
               html[n++] = '</td>';
            }
            html[n++] = '</tr>';
        }

        html[n++] = '</table>';
        return html.join('');
    }

    var rotated = rotateData(tableData);
    var tableHtml = buildTable(rotated);
    document.getElementById('wrapper').innerHTML = tableHtml;
  </script>
</body>
</html>


转置表
var tableData=[{col1:abc]，col2:123}，
{col1:xxx，col2:321}]；
函数旋转数据（表格）{
var result=[]，i，j，key，keyFound；
对于（i=0；i


函数rotateData
在数组中旋转对象的元素，以获得类似

为此，函数测试是否已经有一个数组元素（在外部数组中）包含键，因此它可以将值添加到它的“行”，或者它首先在外部数组中创建一个新元素，其中键在第一个“列”中，值在第二个“列”中
然后buildTable
创建必要的HTML，可以将其插入到包含表的每个元素中。顺便说一句，该函数使用一个数组html
临时存储输出，最后连接其所有元素以返回字符串。这通常比（几乎）无休止地连接字符串要快。
+1对于您的工作来说，但这并不是（确切地）我想要的。我在转换数据方面没有问题。我想要的是一个已经存在的组件，比如YUI DataTable（或任何类似的组件），它已经做到了这一点，并且支持编辑、排序等@pablo:Aha。不幸的是，我什么都不知道，但我对图书馆不太感兴趣。我将保留我的答案，因为它可能对其他人有用。