怎么样用带有背景色的层遮住一个Table

<HTML><HEAD><script>
function f1()
{
document.all.div1.style.display="block";
}
</script>
</HEAD>
<body onclick="f1()" topMargin="0" leftmargin=0>
  <form id="Form1" method="post" runat="server">
   <div align=center style="POSITION:absolute;TOP:100px" >
     <TABLE id="Table1" height="200" cellSpacing="1" cellPadding="1" width="712" border="1">
       <TR>
          <TD width="50%">aa
      </TD>
       <TD align="middle" width="50%">
         <TABLE id="Table2"  cellSpacing="0" borderColorDark="#ffffff" cellPadding="0" width="98" borderColorLight="#ff0000" border="1" height=100 bgcolor=#ffff99>
           <TR>
              <TD>click</TD>
           </TR>
           <TR>
              <TD>&nbsp;</TD>
           </TR>
           <TR>
              <TD>&nbsp;</TD>
           </TR>
         </TABLE>       </TD>
    </TR>
   </TABLE>
</div>
<div id=div1 style="position:absolute; top:100; left:400;  color:red; background-color:black; display:none">
<table height=200 width=200>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</table>
</div>
</form>
</body></HTML>

解决方案 »

  1.   

    <body>
    <button onclick='fHide()'>hide</button>
    <script>
    var T=document.createElement("TABLE");
    T.setAttribute("border","1");
    document.body.appendChild(T);
    for(var i=0;i<10;i++)
    {
    var r=T.insertRow(i)
    for(var j=0;j<5;j++)
    r.insertCell(j).innerHTML="blueDestiny, never-online";
    }
    function fHide() {
    var w=T.offsetWidth;
    var h=T.offsetHeight;
    var l=T.offsetLeft;
    var t=T.offsetTop;
    var d=document.createElement("DIV");
    d.style.backgroundColor='#eeeeee';
    d.style.position="absolute";
    d.style.width=w;
    d.style.height=h;
    d.style.left=l;
    d.style.top=t;
    d.innerHTML='blueDestiny, never-online';
    document.body.insertBefore(d,T);
    }
    </script>
    </body>
      

  2.   

    楼上的朋友写的是很好，但是不是我想要的特定的效果，你们先把我写的html代码在浏览器里看一下，我说的是用层遮住右边的红色边框的Table，由于我的代码里的都是相对位置，不是绝对位置，我不知道该怎样将层定位到指定的位置去遮住红色边框的Table.
    我是想要一个扩展型的方法，不管Table放在哪个单元格里只要点击了Table就用层遮住
      

  3.   

    改一点都不懂改吗？还有一个地方有问题的，你自己想想怎么改吧，都已经说到这份上了，你也该动动手和脑了吧
    <body>
    <TABLE border=1 id=t2>
    <TR>
    <TD>a</TD>
    <TD>a</TD>
    <TD>a</TD>
    <TD>a</TD>
    <TD>a</TD>
    </TR><TR>
    <TD>a</TD>
    <TD>a</TD>
    <TD>a</TD>
    <TD>a</TD>
    <TD>a</TD>
    </TR>
    </TABLE>
    <button onclick='fHide("t1")'>hide</button>
    <button onclick='fHide("t2")'>hide</button>
    <script>
    var T=document.createElement("TABLE");
    T.setAttribute("border","1");
    T.id="t1";
    document.body.appendChild(T);
    for(var i=0;i<10;i++)
    {
    var r=T.insertRow(i)
    for(var j=0;j<5;j++)
    r.insertCell(j).innerHTML="blueDestiny, never-online";
    }
    function fHide(Tid) {
    var T=document.getElementById(Tid);
    var w=T.offsetWidth;
    var h=T.offsetHeight;
    var l=T.offsetLeft;
    var t=T.offsetTop;
    var d=document.createElement("DIV");
    d.style.backgroundColor='#eeeeee';
    d.style.position="absolute";
    d.style.width=w;
    d.style.height=h;
    d.style.left=l;
    d.style.top=t;
    d.innerHTML='blueDestiny, never-online';
    document.body.insertBefore(d,T);
    }
    </script>
    </body>