在表格单元格中显示加载程序

Question

我在表格单元格中显示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);
}

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

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

问题的截图：

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

加载程序的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附加到td，其中position: relative。起初我想“地球上怎么会忘记这种明显的方法？”然而，经过测试后，我注意到它不起作用。 div相对于表容器而不是单元本身定位。

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

  

这是因为根据CSS 2.1，效果位置：相对   表元素未定义。

所以这个解决方案不适用于我的情况。要做的就是修改模板，这样我的所有表单元格都包含一个position:relative的div，我可以使用它来定位加载器。这个解决方案对我来说很痛苦，因为它在我的代码中涉及很多修改，所以我会把它作为最后的手段。

我也不知道为什么海报会删除他的答案 - 这可能对其他人有用。

Answer 1

我尝试的方式略有不同 - 绝对定位，outerWidht / height＆amp;偏移量：

http://jsfiddle.net/tdSDY/

Answer 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);
}