顾名思义，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的可编辑性