Question

jPages我遇到了一些问题。我有一张桌子，想要使用jPages提供的分页。当我从给定页面上的示例中逐行看到fadeTo效果时，我决定在我的桌子上使用相同的内容。通过这样做我遇到了这些问题：

使用border-collapsed时，backgroundcolor会暂时消失，并且只会直接停留在单元格的内容周围，之后会再次出现backgroundcolor。

我通过使用border-separate和使用border-spacing 0px来解决这个问题，并将行样式附加到单元格元素而不是行元素，并通过以这种方式更改行样式，它们只在顶部有边框而不是顶部和底部。

这引出了我的下一个问题：在IE9中，行之间的边界在行淡出之前出现。（在Firefox中不是这样）当行褪色时，每隔一个边框消失（rowstyle1的上边框）。我通过在rowstyle2和左边没有边框的rowstyle1上使用顶部和底部边框解决了边框消失的问题。但是边框仍然出现在行的内容之前。
最后一个问题：因为我不使用border-collapse：折叠了我在IE7中的列之间有白色边框。（不是在IE8中）。另外在IE7，IE8和Opera中没有fadeTo效果。

通过使用div而不是表标签，不存在任何问题！但我知道它在语义上是不正确的。

所以我的问题是：如何解决最后的问题？为什么使用表格标签存在这些问题？也许有人知道为什么我的解决方案有效，因为我无法找到我所调查的解释。

这是当前的代码：

<script>
    $(document).ready(function() {
        $(function(){
            $("div.holder").jPages({
                containerID : "torsch",
                perPage: 40
            });
        });
    }); 
</script>

CSS：

<style>
    .rowstyle2 {    
        height:25px;
        border-left: 0px none;
        border-right:0px none;
        border-top: 1px solid #999;
        border-bottom: 1px solid #999;
        background: url("/images/test.png") repeat-x scroll 0% 0% transparent;
        vertical-align:middle;
    }

    .rowstyle1 {
        background-color:#FFFFFF;
        height:25px;
        border-top: 0px none;
        border-bottom: 0px none;
        border-left:0px none;
        border-right:0px none;  
        vertical-align:middle;
    }

    table {
        border-spacing: 0px;    
    }
</style>

HTML：

<div class="holder"></div>
<table>
    <thead>
        <th>col1</th>
        <th>col2</th>
        <th>col3</th>
    </thead>
    <tbody id="torsch">
        <tr>
            <td class="rowstyle2">1</td>
            <td class="rowstyle2">45</td>
            <td class="rowstyle2">4546</td>
        </tr>
        <tr>
            <td class="rowstyle1">1</td>
            <td class="rowstyle1">45</td>
            <td class="rowstyle1">4546</td>
        </tr>
        <tr>
            <td class="rowstyle2">1</td>
            <td class="rowstyle2">45</td>
            <td class="rowstyle2">4546</td>
        </tr>
        <tr>
            <td class="rowstyle1">1</td>
            <td class="rowstyle1">45</td>
            <td class="rowstyle1">4546</td>
        </tr>
        <tr>
            <td class="rowstyle2">1</td>
            <td class="rowstyle2">45</td>
            <td class="rowstyle2">4546</td>
        </tr>
    </tbody>
</table>

Answer 1

检查，如果有任何人遇到同样的问题请在JPage.js第58行更改

/* only visible items! */
// this._items = this._container.children(":visible");
this._items = this._container.children();

它对我有用。

jPages的问题（jQuery插件）

1 个答案: