rowspansを使用したjquery table-lessレイアウト

Question

私はこの質問をガイドとして使用しますJavascript work-around for display: table-cell in IE <= 7しかし、私はこのHTMLをIE 7,8,9で正しく処理できるようにrowspansを考慮する必要があります。

<div class="Table"> 
    <div class="Row"> 
     <div class="RowSpan"> 
     This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right. 
     </div> 
     <div class="SubRow"> 
     <div class="Column"> 
      Here is some sample text1.1. And some additional sample text. 
     </div> 
     <div class="Column"> 
      Here is some sample text2.1. And some additional sample text. 
     </div> 
     </div> 
     <div class="SubRow"> 
     <div class="Column"> 
      Here is some sample text1.2. And some additional sample text. 
     </div> 
     <div class="Column"> 
      Here is some sample text2.2. And some additional sample text. 
     </div> 
     </div> 
    </div> 
    <div class="Row"> 
     <div class="RowSpan"> 
     This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right. 
     </div> 
     <div class="SubRow"> 
     <div class="Column"> 
      Here is some sample text1.1. And some additional sample text. 
     </div> 
     <div class="Column"> 
      Here is some sample text2.1. And some additional sample text. 
     </div> 
     </div> 
     <div class="SubRow"> 
     <div class="Column"> 
      Here is some sample text1.2. And some additional sample text. 
     </div> 
     <div class="Column"> 
      Here is some sample text2.2. And some additional sample text. 
     </div> 
     </div> 
    </div>  
</div> 

CSS私は以下の通りスクリプトにjQueryの修正を探しています

<style> 
.Table{ 
    display: table; width:300px; border: 1px solid black; border-spacing: 2px; 
} 
.Row{ 
    display: table-cell; border: 1px solid black; vertical-align: middle; float: left; 
} 
.RowSpan{ 
    display: table-cell; border: 1px solid black; vertical-align: middle; 
} 
.SubRow{ 
    display: table-cell; width: 100px; 
} 
.Column{ 
    border: 1px solid black;margin: 2px; 
} 
</style> 

。これは表形式のデータではないので、テーブルを使用したくありません。

$('<table><tr><td></td><td></td><td></td></tr></table>') 
    .find('td') 
     .eq(0) 
      .append($('.Row')) 
      .end() 
     .eq(1) 
      .append($('.RowSpan')) 
      .end() 
     .eq(2) 
      .append($('.SubRow')) 
      .end() 
     .eq(3) 
      .append($('.Column')) 
      .end() 
     .end() 
    .appendTo($('.Table')); 

Answer 1

あなたが作業しているサンプルを誤解していると思います。そこでは、IEの場合、テーブルを使って単純な3列のレイアウトを描画する方法が問題でした。回答のソリューションでした：

Within the string '<table><tr><td></td><td></td><td></td></tr></table>' 
    Find all the elements that are 'TD's 
     If it's the first TD, 
      Take the div ID'd "#sidebar" and place it in that TD 
     If it's the second TD, 
      Take the div ID'd "#main_content" and place it in that TD 
     If it's the third TD, 
      Take any and all divs classed ".aside_info" and place it in that TD 
    Then take that whole string, that's now very long because it's got all my 
     content in it, and place it inside the newly empty div ID'd "#content" 

そしてthusly 3列の表のレイアウトに3列のdivレイアウトを変換します

$('<table><tr><td></td><td></td><td></td></tr></table>') 
    .find('td') 
     .eq(0) 
      .append($('#sidebar')) 
      .end() 
     .eq(1) 
      .append($('#main_content')) 
      .end() 
     .eq(2) 
      .append($('.aside_info')) 
      .end() 
     .end() 
    .appendTo($('#content')); 

ここアルゴリズム書き出され、これが意味することにあります。あなたはあなたに何をやっている

は、algorythmically、次のとおりです。それは壊している理由

Within the string '<table><tr><td></td><td></td><td></td></tr></table>' 
     Find all the elements that are 'TD's 
      If it's the first TD, 
       Take any and all divs classed ".Row" and place it in that TD 
      If it's the second TD, 
       Take any and all divs classed ".RowSpan" and place it in that TD 
      If it's the third TD, 
       Take any and all divs classed ".SubRow" and place it in that TD 
      If it's the fourth TD, 
       Take any and all divs classed ".Column" and place it .... 
        er, well, it won't place them anywhere, because there 
        is no fourth TD in that string. 
     Then take that whole string, that's now very long because it's got 
      some of my content in it, and place it inside any and all divs 
      classed ".Table" 

を参照してください？それは一致しません。

これを解決するには、まず、レイアウトが同じでなければならないことに注意してください。
2番目...本当に良い方法があるはずです。しかし、ここに行く：

$('<table><tr><td rowspan=2></td><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td rowspan=2></td><td></td><td></td></tr><tr><td></td><td></td></tr></table>') 
     .find('td') 
      .eq(0) //first td with a rowspan 
       .append($('.RowSpan').eq(0)) // gotta insert the first one only 
       .end() 
      .eq(1) 
       .append($('.SubRow').eq(0).find('.Column').eq(0)) // inserting the first column from the first sub row 
       .end() 
      .eq(2) 
       .append($('.SubRow').eq(0).find('.Column').eq(1)) // inserting the second column from the first sub row 
       .end() 
      .eq(3) 
       .append($('.SubRow').eq(1).find('.Column').eq(0)) // inserting the first column from the second sub row 
       .end() 
      .eq(4) 
       .append($('.SubRow').eq(1).find('.Column').eq(1)) // inserting the second column from the second sub row 
       .end() 
      .eq(5) //second td with a rowspan 
       .append($('.RowSpan').eq(1)) // gotta insert the second RowSpan div 
       .end() 
      .eq(6) 
       .append($('.SubRow').eq(2).find('.Column').eq(0)) // inserting the first column from the third sub row 
       .end() 
      .eq(7) 
       .append($('.SubRow').eq(2).find('.Column').eq(1)) // inserting the second column from the third sub row 
       .end() 
      .eq(8) 
       .append($('.SubRow').eq(3).find('.Column').eq(0)) // inserting the first column from the fourth sub row 
       .end() 
      .eq(9) 
       .append($('.SubRow').eq(3).find('.Column').eq(1)) // inserting the second column from the fourth sub row 
       .end() 
      .end() 
     .appendTo($('#Table')); 

私はどこでも構文を壊していないと仮定して、それを行う必要があります。