Question

我做了很多研究，不知道最好的方法是什么。我有一个3行3列的剑道网格（表格）。我在初始页面加载时显示了一个只有第一列的表，然后我调用了AJAX方法来检索其余的数据，并将整个表替换为新的HTML。

---------------- | 01 | | | | 02 | | | | 03 | | | ----------------

我用html替换整个表格，显示如下表格：

---------------- | 01 | hi | gr | | 02 | hi | sd | | 03 | fe | sf | ----------------

我想要做的是，以某种方式在初始空表中的空列上“绘制”一个正方形（仅填充第一列），这样我就可以在中心显示一条消息。

实现这一目标的最佳方法是什么？

Answer 1

以下是您正在寻找的示例。由于细胞边界间距或某些东西，有2个px错误，但我现在太累了，无法找到解决方案。你的div的高度等于填充顶部+高度。需要填充以将加载文本垂直放置在中间位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #mytable{
            position: absolute;
            border: 1px solid black;
            width: 20%;
            width: 100px;
            height: 100px;

}
        #box{
            padding-top: 40px;
            text-align: center;
            position: absolute;
            margin: 0px;
            z-index: 40;
            border: 1px solid blue;
            width: 100px;
            height: 60px;
        }

    </style>
</head>
<body>
    <table id="mytable">
        <tr>
            <td>Cat</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Dog</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Parrot</td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <div id="box">
        Loading...
    </div>
</body>
</html>

Answer 2

将一个类添加到表loading并使用CSS标记它。当AJAX调用为done()时，请删除loading类。

但是你使用Kendo这个例子，这个例子在jQuery中只是提示。

var table = $('#table');

table.addClass('loading');
$.ajax(ajaxOptions).done(function(){
    table.removeClass('loading');
});

然后在CSS中使用background-color中的透明rgba(238, 238, 238, 0.4)或ajax loader（因此得名）。

table { position: relative; }
table.loading:before {
    width: 100%;
    height: 100%;
    content: 'loading';
    background-color: rgba(234,234,234,0.4);
    padding: 70%;
    box-sizing: border-box;
    position: absolute;
    text-align: center;
}

伪选择器:before将在table上创建一个隐藏图层，只有在添加loading类时才会显示。一旦AJAX呼叫为done()，您将再次将其删除。

水平居中可以使用text-align完成，但垂直居中只能使用height或min-height。

您可以使用第二个隐藏图层:after解决该问题。

<强> DEMO

如何在元素中使用Javascript绘制正方形？

2 个答案: