0

我对jPages有一些问题。我有一张桌子，想使用 jPages 提供的分页。当我看到给定页面上示例的逐行淡入淡出效果时，我决定在我的桌子上放同样的效果。通过这样做，我遇到了这些问题：

  • 当使用border-collapsed时，背景色会消失片刻，并直接停留在单元格内容的周围，之后背景色会再次出现。

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

  • 这带来了我的下一个问题：在 IE9 中，行之间的边界出现在行褪色之前。（在 Firefox 中不是这样）当行褪色时，每隔一个边框就会消失（rowstyle1 的上边框）。我通过在 rowstyle2 上使用顶部和底部边框以及在没有边框的左侧 rowstyle1 上解决了边框消失的问题。但是边框仍然出现在行的内容之前。

  • 最后一个问题：因为我不再使用border-collapse:collapsed 我在IE7 中的列之间有白色边框。（不在 IE8 中）。另外在 IE7、IE8 和 Opera 中没有 fadeTo 效果。

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

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

这是当前代码：

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

1 回答 1

0

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

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

它对我有用。

于 2017-02-22T08:52:41.713 回答