简体   繁体   中英

How to draw a square using Javascript inside an element?

I have done a lot of research and am not sure what the best approach is. I have a Kendo Grid (table) with 3 rows and 3 columns. I show a table with only the first column populated upon initial page load, and then I call and AJAX method to retrieve the rest of the data and replace the whole table with the new HTML.

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

And I replace the whole table with html that shows a table like this:

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

What I want to do though, is somehow "draw" a square over the empty columns in the initial empty table (with only the first column populated) so I can display a message in the center.

What is the best approach to achieve this?

Here is an example what are you looking for. There is 2 px error because of the cells border spacing or something but i'm too tired to find the solution for that now. Your div's height is equals with padding-top+height. Padding is needed to position your loading text vertically middle.

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

Add a class to the table loading and mark it up with CSS. When the AJAX call is done() , remove the loading class.

However you do it with Kendo, this example is simply suggestive in jQuery.

var table = $('#table');

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

Then for the CSS play around with transparent background-color in rgba(238, 238, 238, 0.4) or an ajax loader (hence the name).

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

The pseudo selector :before will create a hidden layer on the table and only be visible when your loading class is added. Once the AJAX call is done() you'll remove it again.

The horizontal centering can be done with text-align but the vertical centering is only possible with a height or min-height .

You can work around that issue by using a second hidden layer :after .

DEMO

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM