在表格单元格中显示加载器答案

【问题标题】：Displaying a loader in a table cell在表格单元格中显示加载器
【发布时间】：2011-12-06 16:20:34
【问题描述】：

在表格单元格中显示 AJAX 加载器时遇到一些问题。

我希望它显示在单元格上以强调有数据正在加载到其中。但是，我在正确定位它时遇到了问题。

我的基本解决方案：

CSS：

.loader {
    z-index: 30;
    text-align: center;
    background-color: #f00; /* Red, so I could see it properly */
    opacity:0.5;
    filter:alpha(opacity=50); /* For IE8 and earlier */
    position: relative;
}

JS：

displayCellLoader: function (cell) {
  var loader = $("<div>").addClass("loader").css({
    width: cell.width(),
    height: cell.height(),
    left: 0,
    top: 0
  });
  cell.append(loader);
}

但是，这种设计有一些缺陷：

如果表格单元格有填充（并且它们有），加载程序将不会覆盖它
加载程序将显示在单元格包含的任何内容下方，而不是上方（如预期的那样）

问题截图：

我认为消除这些缺陷的最佳方法是绝对定位装载机，但它导致了不同的问题：

加载器的left 和right CSS 属性取自offset() 方法的结果，但是由于未知原因，加载器的显示有点向右移动（而且有点大）。

这是我修改后的 JS：

displayCellLoader: function (cell) {
    var offset = cell.offset();
    var loader = $("<div>").addClass("loader").css({
        width: cell.innerWidth(),
        height: cell.innerHeight(),
        left: offset.left,
        top: offset.top
    });
    body.append(loader); /* body is $("body") */
}

这就是现在的样子：

有人知道为什么会这样吗？

而且，更重要的是，有没有更好的方法呢？

编辑：发布了一个解决方案，关于我在这里没有提到的一种方式 - 将绝对定位的 div 附加到具有 position: relative 的 td 中。起初我想“我怎么能忘记这么明显的方法？”，但在测试后，我发现它不起作用。 div 的位置相对于表格容器，而不是单元格本身。

我搜索了这个问题并找到了this question。引用最佳答案，

这是因为根据 CSS 2.1，position: relative 的效果表元素上未定义。

所以这个解决方案不适用于我的情况。要走的路是修改模板，这样我的所有表格单元格都包含一个带有position:relative 的div，我可以用它来定位加载器。这个解决方案对我来说有点痛苦，因为它涉及到我的代码中的大量修改，所以我将它作为最后的手段。

我也不知道为什么发帖者删除了他的答案——这可能对其他人有用。

【问题讨论】：

好吧，我已经“找到”了一种解决方法，方法是用相对 div 包装 td 的内容，然后将加载程序绝对定位在其中。如果没有人找到更好的方法，我会发布并接受我自己的答案。

标签： jquery html css

【解决方案1】：

我尝试了一种稍微不同的方式 - 绝对定位、outerWidht/height 和偏移：

http://jsfiddle.net/tdSDY/

【讨论】：

谢谢你的回答，但在我的情况下它不能正常工作，可能是因为一些样式和 html 差异。

【解决方案2】：

好吧，我最终将单元格内容嵌入到 div 中，如下所示：

displayCellLoader: function (cell) {
    var paddingTop = parseInt(cell.css("padding-top"));
    var paddingLeft = parseInt(cell.css("padding-left"));
    var tempDiv = $("<div>").css({
        position: "relative",
        height: cell.height()
    }).html(cell.html());
    cell.empty().append(tempDiv);
    var loader = $("<div>").addClass("loader").css({
        width: cell.width(),
        height: cell.outerHeight(),
        top: -paddingTop,
        left: -paddingLeft
    }).append($("<img>").attr("src", "images/loader-cell.gif"));
    tempDiv.append(loader);
}

【讨论】：