用于将列转换为行和列的HTML代码或框架表格的HTML代码或框架的代码或框架

Question

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

Answer 1

这是一个简单的函数，假定恰好有n * m个的细胞（无colspans/rowspans，没有变化的行宽度）：

function translate(tableel) { 
    var rows = tableel.rows, 
     m = rows.length, 
     n = rows[0].cells.length; 
    for (var i=0; i<n; i++) { 
     var r = tableel.insertRow(-1); 
     for (var j=0; j<m; j++) 
      r.appendChild(rows[j].cells[0]); 
    } 
    for (var i=0; i<m; i++) 
     tableel.deleteRow(0); 
} 

将非常与jQuery :-)更复杂

Answer 2

这样的事情？

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

Answer 3

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