javascript - 在现有div上渲染div

我有这段代码模拟了我的代码中正在发生的事情:

Fiddle

<table style="width:100%" id="tableID">
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
</table>
<button type="button" onclick="show('#tableID')">Click Me!</button>

<script type="text/javascript">
    function show(id) {
        $(id).html('<p class="pleaseWait">Please Wait</p>');
    }
</script>

当用户单击该按钮时，将在某处发送一个请求，并在返回答复时更新表。

同时，显示“请稍候”消息而不是表格。

我希望“loading” div出现在现有表上，而不是替换它。

我认为最好的方法是在现有元素(本例中为tableID)中添加一个CSS类以使其变暗，但是我不确定如何在其上呈现另一个div(“请稍候”消息) 。

任何想法，将不胜感激!

最佳答案

您将要添加一个绝对位置或固定位置元素:

.pleaseWait {
    background-image: url("http://www.ajaxload.info/images/exemples/6.gif");
    background-repeat:no-repeat;
    position: absolute;
    z-index: 999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding-top: 50px;
    background-color: rgba(0,0,0,.5);
    color: white;
}

function show(id) {
    $(id).append('<p class="pleaseWait">Please Wait</p>');
}

Demo

我将样式清理留给您。