Question

我使用这个问题作为指南Javascript work-around for display: table-cell in IE <= 7但是，我需要考虑rowpans所以我可以在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') );

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

带有rowspans的jquery无表格布局

1 个答案: