jQuery的无表布局与rowspans

Question

我使用这个问题作为指导Javascript work-around for display: table-cell in IE <= 7但是，我需要考虑rowspans，所以我可以在IE 7,8,9正确处理这个HTML。

<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

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

我找一个jQuery修复程序下面列出的脚本。这不是表格数据，所以我不想使用表格。

$('<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。回答者的解决方案是：

$('<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')); 

这里的，这意味着，算法写出来：

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" 

正是如此三列DIV布局转换为一个三列的表格布局。

你在你做什么，是，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" 

了解为什么它打破？它不匹配。

要解决这个问题：
首先，请注意它们的布局必须相同，所以如果它是以编程方式绘制的，并且您不知道有多少行，则会有所不同。
第二......真的，有一个更好的方法。但是，在这里你去：

$('<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')); 

这应该这样做，假设我没有搞乱任何地方的语法。