cssとhtmlの列 - フリップテーブル

Question

タグに属性を移動することを含むHTMLテーブルを簡単に反転（転置、回転）する方法を見つけようとしています。 http://quirksmode.org/css/css2/columns.htmlによれば、私は境界線、背景、幅、および視認性しか使用できません...これはまだ有効ですか？テーブルの行にあるクラス名やイベントハンドラはどうですか？

ドラッグ可能な列（jQuery-UIを使用）もあります。フリップした後にそれらを再初期化する必要がありますか？

jQuery-UIプラグインがありますか？

Answer 1

このstack overflow questionがあなたの同じかゆみを傷つけるかもしれないかのように見えます。ここで

は、その質問の答えで述べたのjsフィドルです： - ：svinto

このコードスニペットにそのjsfiddleの内容をコピーしhttp://jsfiddle.net/CsgK9/2/私はクレジットがに行く、これを書いていません。

これが役に立ちます。

$("a").click(function(){ 
 
    $("table").each(function() { 
 
     var $this = $(this); 
 
     var newrows = []; 
 
     $this.find("tr").each(function(){ 
 
      var i = 0; 
 
      $(this).find("td").each(function(){ 
 
       i++; 
 
       if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); } 
 
       newrows[i].append($(this)); 
 
      }); 
 
     }); 
 
     $this.find("tr").remove(); 
 
     $.each(newrows, function(){ 
 
      $this.append(this); 
 
     }); 
 
    }); 
 
    
 
    return false; 
 
});

td { padding:5px; border:1px solid #ccc;} 
 
.red { color: red; } 
 
.border td { border: 1px solid black; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td class="red">1</td> 
 
     <td class="red">4</td> 
 
     <td class="red">7</td> 
 
    </tr> 
 
    <tr class="border"> 
 
     <td>2</td> 
 
     <td>5</td> 
 
     <td>8</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>6</td> 
 
     <td>9</td> 
 
    </tr> 
 
</table> 
 

 

 
<p><a href="#">Do it.</a></p>

<tr>に置くクラスが引っ張っ取得しないことに注意してください。したがって、この回答には改善の余地があります。

この方法は、あなたが探しているものに近いかもしれません - それは言及する価値のある別のアプローチです。クレジットはStefan Kendallこれらの例の両方で

function swap(cells, x, y){ 
 
    if(x != y){  
 
    
 
    var $cell1 = cells[y][x]; 
 
    var $cell2 = cells[x][y]; 
 
    $cell1.replaceWith($cell2.clone()); 
 
    $cell2.replaceWith($cell1.clone()); 
 
    } 
 
} 
 

 
var cells = []; 
 
$('table').find('tr').each(function(){ 
 
    var row = []; 
 
    $(this).find('td').each(function(){ 
 
     row.push($(this));  
 
    }); 
 
    cells.push(row); 
 
}); 
 

 
for(var y = 0; y <= cells.length/2; y++){ 
 
    for(var x = 0; x < cells[y].length; x++){ 
 
     swap(cells, x, y); 
 
    } 
 
}

.red { color: red; } 
 
.border { border: 2px solid black; } 
 
.blue { color: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
     <tr> 
 
      <td class="red">01</td><td class="red">02</td><td class="red">03</td><td>04</td> 
 
     </tr> 
 
     <tr class="blue"> 
 
      <td class="border">05</td><td class="border">06</td><td class="border">07</td><td class="border">08</td> 
 
     </tr> 
 
     <tr> 
 
      <td>09</td><td>10</td><td>11</td><td>12</td> 
 
     </tr> 
 
     <tr> 
 
      <td>13</td><td>14</td><td>15</td><td>16</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

に行き、限り、あなたが<td>上のCSSクラスを維持するとして、それは問題なく上に移動します。私は<tr>がその属性を失っていることに気付きました。小さな修正を加えれば、あなたもそれらを動かすことができると確信しています。

これはあなたの目標に近づくことを望みます。