顾名思义，div遮罩就是将网页上的一部分用div遮盖起来，防止用户误点，因此div遮罩的一个用途就是将table设置为不可编辑。
作者通过查找资料，并进行简单的测试，最终完成了以下几段简单代码，来实现简单的div遮罩功能
javascript代码
function addDiv(){
var html = "<div id=\"show\" style=\"position:absolute;\
background:transparent;display:none;z-index:1001;\"></div>";
$(document.body).append(html);
}
function showdiv(target){
addDiv();
var left = $("#" + target).offset().left;
var top = $("#" + target).offset().top;
var width = $("#" + target).css('width');
var height = $("#" + target).css('height');
$("#show").css("display", "block");
$("#show").css("left", left);
$("#show").css("top", top);
$("#show").css("width", width);
$("#show").css("height", height);
}
function hidediv() {
$("#show").css("display", "none");
}对应的网页中的元素为
<body>
<table id="test">
<tr>
<td><input></input></td>
<td><input></input></td>
</tr>
<tr>
<td><input></input></td>
<td><input></input></td>
</tr>
<tr>
<td><input></input></td>
<td><input></input></td>
</tr>
</table>
<div id="bg">
<input></input>
</div>
<div id="gb">
<input></input>
</div>
<input id="btnshow" type="button" value="Show" onclick="showdiv('test');"/>
<input id="btnclose" type="button" value="Close" onclick="hidediv();"/>
</body>
这样通过点击Show和Close按钮可以控制table的可编辑性