用于在HTML表格或div网格中将列转换为行以及将行转换为列的JavaScript代码或框架

我正在寻找一个脚本或JavaScript框架插件，可以帮助我操纵HTML网格。在某些事件调用中，列和行应该互换。

类似的内容

var arr = [];

//Convert to multi array.
$("tr").each(function() {
  var r = arr.push([]);
  $(this).children("td").each(function() {
    arr[r - 1].push($(this).text())
  })
});

//Flip array.
var table = "<table>";
for(r=0;r<arr.length;r++) {
 table += "<tr>";
 for(c=0;c<arr[r].length;c++) {
   table += "<td>" + arr[r][c] + "</td>"; //Flipped indexes.
 }
 table += "</tr>";
}
table += "</table>";

var arr=[]；
//转换为多数组。
$（“tr”）。每个（函数（）{
var r=arr.push（[]）；
$（this）.children（“td”）.each（function（）{
arr[r-1].推送（$（this）.text（））
})
});
//翻转阵列。
var表=”；
对于（r=0；r类似的东西

var arr = [];

//Convert to multi array.
$("tr").each(function() {
  var r = arr.push([]);
  $(this).children("td").each(function() {
    arr[r - 1].push($(this).text())
  })
});

//Flip array.
var table = "<table>";
for(r=0;r<arr.length;r++) {
 table += "<tr>";
 for(c=0;c<arr[r].length;c++) {
   table += "<td>" + arr[r][c] + "</td>"; //Flipped indexes.
 }
 table += "</tr>";
}
table += "</table>";

var arr=[]；
//转换为多数组。
$（“tr”）。每个（函数（）{
var r=arr.push（[]）；
$（this）.children（“td”）.each（function（）{
arr[r-1].推送（$（this）.text（））
})
});
//翻转阵列。
var表=”；
对于（r=0；r这是一个简单的函数，假设有n*m个单元格（没有列间距/行间距，没有变化的行宽度）：

函数转换（表格）{
变量行=表格行，
m=行数。长度，
n=行[0].cells.length；
对于（var i=0；i这是一个简单的函数，假设有n*m个单元格（没有colspan/rowspans，没有变化的行宽）：

函数转换（表格）{
变量行=表格行，
m=行数。长度，
n=行[0].cells.length；
对于（变量i=0；i

#容器{
背景色：#330；
最小高度：100px；
最小宽度：100px；
位置：相对位置；
顶部：10px；
左：15px；
}
#集装箱电气{
边框：1px纯黑；
溢出：隐藏；
}
因塞尔先生{
显示：内联块；
高度：自动；
宽度：自动；
}
addEvent（'domready'，function（）{
var r=$$（'.c1'）。长度；
变量c=$$（'.r1'）。长度；
var mx_last_w=0，mx_last_h=0；
对于（变量i=1；i mx_h）{
mx_h=当前总高度；
}
});
控制台日志（mx_h）；
$$（'.r'+i）.每个（函数（el）{
//el.set（'tween'，{transition:Fx.Transitions.Elastic.easeOut}）；
//标高吐温（'高度'，mx_h）；
//el.tween（'顶部'，mx\u last\u h）；
el.设置方式（“高度”，mx_h）；
el.setStyle（“顶部”，mx_last_h）；
el.setStyle（“位置”、“绝对”）；
});
mx_last_h+=mx_h；
}
对于（var j=1；j mx_w）{
mx_w=当前总宽度；
}
});
控制台日志（mx_w）；
$$（'.c'+j）.每个（函数（el）{
el.set（'tween'，{transition:Fx.Transitions.Elastic.easeOut}）；
//标高吐温（'宽度'，mx_w）；
el.tween（'左'，mx\u last\u w）；
标高设置样式（“宽度”，mx_w）；
//el.setStyle（“左”，mx\u last\u w）；
el.setStyle（“位置”、“绝对”）；
});
mx_last_w+=mx_w；
}
document.id（'container'）.addEvent（'click'，function（）{
$$（'elerc'）。每个（函数（el）{
el.setStyle（“高度”、“自动”）；
el.setStyle（“宽度”、“自动”）；
el.setStyle（'显示'，'内联块'）；
});
var r=$$（'.c1'）。长度；
变量c=$$（'.r1'）。长度；
var mx_last_w=0，mx_last_h=0；
对于（变量i=1；i

#容器{
背景色：#330；
最小高度：100px；
最小宽度：100px；
位置：相对位置；
顶部：10px；
左：15px；
}
#集装箱电气{
边框：1px纯黑；
溢出：隐藏；
}
因塞尔先生{
显示：内联块；
高度：自动；
宽度：自动；
}
addEvent（'domready'，function（）{
var r=$$（'.c1'）。长度；
变量c=$$（'.r1'）。长度；
var mx_last_w=0，mx_last_h=0；
对于（变量i=1；i mx_h）{
mx_h=当前总高度；
}
});
控制台日志（mx_h）；
$$（'.r'+i）.每个（函数（el）{
//el.set（'tween'，{transition:Fx.Transitions.Elastic.easeOut}）；
//标高吐温（'高度'，mx_h）；
//el.tween（'顶部'，mx\u last\u h）；
el.设置方式（“高度”，mx_h）；
el.setStyle（“顶部”，mx_last_h）；
el.setStyle（“位置”、“绝对”）；
});
mx_last_h+=mx_h；
}
对于（var j=1；j mx_w）{
mx_w=当前总宽度；
}
});
控制台日志（mx_w）；
$$（'.c'+j）.每个（函数（el）{
el.set（'tween'，{transition:Fx.Transitions.Elastic.easeOut}）；
//标高吐温（'宽度'，mx_w）；
el.tween（'左'，mx\u last\u w）；
标高设置样式（“宽度”，mx_w）；
//el.setStyle（“左”，mx\u last\u w）；
el.setStyle（“位置”、“绝对”）；
});
mx_last_w+=mx_w；
}
document.id（'container'）.addEvent（'click'，function（）{
$$（'elerc'）。每个（函数（el）{
el.setStyle（“高度”、“自动”）；
el.setStyle（“宽度”、“自动”）；
el.setStyle（'显示'，'内联块'）；
});
var r=$$（'.c1'）。长度；
变量c=$$（'.r1'）。长度；
var mx_last_w=0，mx_last_h=0；
对于（var i=1；i
    <script src="./mootools-core-1.4.5-full-compat.js" ></script>
    <script src="./mootools-more-1.4.0.1.js" ></script>
    <style>
        #container{
            background-color: #330;
            min-height: 100px;
            min-width: 100px;
            position:relative;
            top:10px;
            left:15px;
        }
        #container .elerc {
            border: 1px solid black;
            overflow: hidden;
        }
        .inncell {
            display: inline-block;
            height: auto;
            width: auto;

        }
    </style>
    <script>

        window.addEvent('domready',function(){

            var r= $$('.c1').length;
            var c=$$('.r1').length;
            var mx_last_w = 0, mx_last_h = 0;

            for(var i=1; i<=r; i++){

                var  mx_h = 0;

                $$('.r'+i+' .inncell').each(function(el){
                    var cur_h = el.getComputedSize();
                    if(cur_h.totalHeight > mx_h){
                        mx_h = cur_h.totalHeight;
                    }
                });

                console.log(mx_h);

                $$('.r'+i).each(function(el){
                    //el.set('tween', {transition: Fx.Transitions.Elastic.easeOut});
                    //el.tween('height', mx_h);
                    //el.tween('top', mx_last_h);

                    el.setStyle('height', mx_h);
                    el.setStyle('top', mx_last_h);
                    el.setStyle('position', 'absolute');
                });
                mx_last_h += mx_h;
            }

            for(var j=1; j<=c; j++){

                var  mx_w = 0;

                $$('.c'+j+' .inncell').each(function(el){
                    var cur_w = el.getComputedSize();
                    if(cur_w.totalWidth > mx_w){
                        mx_w = cur_w.totalWidth;
                    }
                });

                console.log(mx_w);

                $$('.c'+j).each(function(el){

                    el.set('tween', {transition: Fx.Transitions.Elastic.easeOut});
                    //el.tween('width', mx_w);
                    el.tween('left', mx_last_w);

                    el.setStyle('width', mx_w);
                    //el.setStyle('left', mx_last_w);
                    el.setStyle('position', 'absolute');
                });
                mx_last_w += mx_w;
            }

            document.id('container').addEvent('click',function(){

                $$('elerc').each(function(el){
                    el.setStyle('height','auto');
                    el.setStyle('width','auto');
                    el.setStyle('display','inline-block');
                });

                var r= $$('.c1').length;
                var c=$$('.r1').length;

                var mx_last_w = 0, mx_last_h = 0;

                for(var i = 1; i<=r; i++){
                    $$('.r'+i).each(function(el){
                        el.addClass('tr'+i);
                        el.removeClass('r'+i);
                    });
                }
                for(var j=1; j<=c; j++){
                    $$('.c'+j).each(function(el){
                        el.addClass('r'+j);
                        el.removeClass('c'+j);
                    });
                }

                for(var k = 1; k<=r; k++){
                    $$('.tr'+k).each(function(el){
                        el.addClass('c'+k);
                        el.removeClass('tr'+k);
                    });
                }

                for(var i=1; i<=c; i++){

                    var  mx_h = 0;

                    $$('.r'+i+' .inncell').each(function(el){

                        var cur_h = el.getComputedSize();
                        if(cur_h.totalHeight > mx_h){
                            mx_h = cur_h.totalHeight;
                        }
                    });

                    console.log(mx_h);

                    $$('.r'+i).each(function(el){

                        //el.set('tween', {transition: Fx.Transitions.Elastic.easeOut});
                        //el.tween('height', mx_h);
                        //el.tween('top', mx_last_h);

                        el.setStyle('height', mx_h);
                        el.setStyle('top', mx_last_h);
                        el.setStyle('position', 'absolute');
                    });
                    mx_last_h += mx_h;
                }

                for(var j=1; j<=r; j++){

                    var  mx_w = 0;

                    $$('.c'+j+' .inncell').each(function(el){
                        var cur_w = el.getComputedSize();
                        if(cur_w.totalWidth > mx_w){
                            mx_w = cur_w.totalWidth;
                        }
                    });

                    console.log(mx_w);

                    $$('.c'+j).each(function(el){

                        el.set('tween', {transition: Fx.Transitions.Elastic.easeOut});
                        //el.tween('width', mx_w);
                        el.tween('left', mx_last_w);

                        el.setStyle('width', mx_w);
                        //el.setStyle('left', mx_last_w);
                        el.setStyle('position', 'absolute');
                    });
                    mx_last_w += mx_w;
                }
            });
        });
    </script>

    <div id="container">
        <div class="elerc r1 c1"><div class="inncell">name1</div></div> <div class="elerc r1 c2"><div class="inncell"><div style="">12<br/>34</div></div></div> <div class="elerc r1 c3"><div class="inncell"><img src="img02-hover.jpg" style="height: 100px;width: 100px;"/></div></div>
        <div class="elerc r2 c1"><div class="inncell">name2</div></div> <div class="elerc r2 c2"><div class="inncell">22</div></div> <div class="elerc r2 c3"><div class="inncell"><img src="img01-hover.jpg" style="height: 50px;width: 70px;" /></div></div>
    </div>