如何在元素内使用 Javascript 绘制正方形？答案

【问题标题】：How to draw a square using Javascript inside an element?如何在元素内使用 Javascript 绘制正方形？
【发布时间】：2016-01-23 13:58:00
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

你想用“whut”画一个正方形吗？开放解释...首先想到：使用CSS => background-color background-image border，第二个想法：您喜欢输出哪些字符，以编程方式绘制正方形▄ ■？
我基本上想用其中包含“正在加载...”的文本“覆盖”我的表格。我希望我要覆盖的这个元素大致位于我的桌子的中心。即使调整了窗口大小，我也希望这个元素大致保持在表格的中心。这可能吗？

标签： javascript html css asp.net kendo-ui

【解决方案1】：

这是您要查找的示例。由于单元格边框间距或其他原因，存在 2 px 错误，但我现在太累了，无法找到解决方案。您的 div 的高度等于 padding-top+height。需要填充以将加载文本垂直居中放置。

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

【讨论】：

我基本上想用其中包含“正在加载...”的文本“覆盖”我的表格。我希望我要覆盖的这个元素大致位于我的桌子的中心。即使调整了窗口大小，我也希望这个元素大致保持在表格的中心。这可能吗？这个答案是否可以解决这个问题？
您还可以为其设置背景以隐藏表格或使其小于表格。
加载表格数据时，只需将叠加层的显示属性更改为“无”；
您将表格的宽度和高度设置为常数值，我不确定表格的高度和宽度（取决于加载的数据和窗口的大小）。我该如何解决这个问题？
你真的不能。但是你可以只显示覆盖并隐藏表格，直到它加载然后交换它们。当然，您也可以以 % 的形式给出它，但如果您不知道您的桌子有多大，那将无济于事。

【解决方案2】：

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

不管你用 Kendo 做什么，这个例子在 jQuery 中只是暗示性的。

var table = $('#table');

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

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

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

【讨论】：