关于动态在TD上创建层的问题

我有一个TABLE  里面N个TD
我想动态在每个TD里在创建一个层，鼠标移动到Td上的时候，则显示这个层，并可编辑这个层
效果如图
http://detail.zol.com.cn/135/134596/param.shtml

解决方案 »

  1.   


    <td onmouseover="document.getElementById('div1').style.display='block';">
    <div id="div1" style="display:none"></div></td>
    代码类似于上面就可以实现。
      

  2.   

    下面这个修改下就行<html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
            <META http-equiv="Content-Style-Type" content="text/css">
         
        </head>
        <script language=javascript>
            var TH_HEIGHT="20px";
            var THCOLOR="#ffff99";
            var THBGCOLOR= "#ccecff";
            var NEW_COLOR="#ffffff";
            var lastObj;
            function createEventTable() {
                var newRow,col1,col2,col3;
                var ln = document.getElementById("tb1").rows.length;
                if( ln > 0){
                    for(var i=0; i<ln; i++){
                        if(document.getElementById("tb1").rows.length <= 0)break;
                        document.getElementById("tb1").deleteRow(-1);
                    }
                }
                for(var colno=0; colno<15; colno++){    
                    newRow = document.getElementById("tb1").insertRow(-1);
                    newRow.id = 'r'+colno;
                    document.getElementById("r"+colno).height = TH_HEIGHT;
                    document.getElementById("r"+colno).bgColor = THCOLOR;
                    col1=newRow.insertCell(0);
                    col2=newRow.insertCell(1);
                    col3=newRow.insertCell(2);
                    col1.id="col1"+colno
                    col2.id = "col2"+colno;
                    col3.id = "col3"+colno;
                    col1.innerText = "列一"+colno;
                    col2.innerText = "列二"+colno;
                    col3.innerText = "列三"+colno;
                    col1.onmouseover=alertMe;
                    col2.onmouseover=alertMe
                    col3.onmouseover=alertMe            
                }
            }        function alertMe(){
    if(lastObj == this) return false;
    if(lastObj!=null) lastObj.style.backgroundColor = THCOLOR;
    this.style.backgroundColor = NEW_COLOR;
    lastObj = this;
    document.getElementById("movediv").style.left=this.offsetLeft-5;
    document.getElementById("movediv").style.top=this.offsetTop+12;
                            document.getElementById("movediv").innerHTML=this.innerHTML

       }
       function rowNo(posx){
          var no=(parseInt(posx)-50)/36
      return Math.round(no);
       }
            window.onload=function(){
                createEventTable(); 
            }    </script>
        <body ><div id=movediv style="background-color:#cceecc;position:absolute;width:56px;height:20px;z-index:2"></div>
            <TABLE  cellSpacing="0" borderColorDark="black" cellPadding="1" borderColorLight="black"  border="1" style="position:absolute;left:50px;z-index:1">
                <thead>
                <COLGROUP>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                    <COL align="center">
                    </COL>
                <TR height="20px" bgColor="#ccecff" id="sss">
                    <TH width="36" >列1</TH>
                    <TH width="36" >列2</TH>
                    <TH width="36" >列3</TH>
                </TR>
            </thead>
            <TBODY id="tb1">
            </TBODY>
        </TABLE></body>
    </html>
      

  3.   

    http://topic.csdn.net/u/20090805/10/bbc3137b-df3c-4e8f-9778-199e372e9a5e.html看下我的回复
      

  4.   

    简单的例子<script>
    var ea, div,cur;
    function doit(obj){
      obj.appendChild(div);
      div.style.display = "block";
      cur = obj;
    }
    function edit(){
    if(cur==null) return;
    var de = cur.getElementsByTagName("div")[0];
    var s = de.innerHTML;
    var r = prompt("修改", s)
    if(s!=null && s !="") de.innerHTML = r;
    }
    window.onload=function(){
    div = document.getElementById("pad");}
    </script>
    <table>
    <tr>
    <td>xx</td><td onmouseover="doit(this)"><div style="float:left;">ss sassa asdad sdad adad</div></td>
    </tr>
    <tr>
    <td>xx</td><td onmouseover="doit(this)"><div style="float:left;">ss sassa asdad sdad adad</div></td>
    </tr>
    <tr>
    <td>xx</td><td onmouseover="doit(this)"><div style="float:left;">ss sassa asdad sdad adad</div></td>
    </tr> <tr>
    <td>xx</td><td onmouseover="doit(this)"><div style="float:left;">ss sassa asdad sdad adad</div></td>
    </tr>
    </table>
    <div id="pad" style="width:80px;display:none;float:right" onmouseover="event.cancelBubble=true;"><a id="lk" href="javascript:edit();void(0);">编辑</a></div>
      

  5.   

     
    BeenZ  我的table是如下代码，该怎么绑定啊
    <table border="1" width="600" id="table3" style="border-collapse: collapse" bordercolor="#000000">
    <tr>
    <td align="center">项目</td>
    <td align="center">单位</td>
    <td align="center">数量</td>
    <td align="center">备 注</td>
    </tr>
    <tr>
    <td align="center">供水平均温度</td>
    <td align="center"><font face="宋体">℃</font></td>
    <td exp="AverData(15,1)" align="center" >　</td>
    <td align="center">　</td>
    </tr>
    <tr>
    <td align="center">回水平均温度</td>
    <td align="center"><font face="宋体">℃</font></td>
    <td exp="AverData(15,2)" align="center" >　</td>
    <td align="center">　</td>
    </tr>
    <tr>
    <td align="center">温差</td>
    <td align="center"><font face="宋体">℃</font></td>
    <td exp="AverData(15,1)-AverData(15,2)" align="center" >　</td>
    <td align="center">　</td>
    </tr>
    <tr>
    <td align="center">供水平均压力</td>
    <td align="center">Mpa</td>
    <td exp="AverData(15,5)" align="center" >　4</td>
    <td align="center">　</td>
    </tr>
    <tr>
    <td align="center">回水平均压力</td>
    <td align="center">Mpa</td>
    <td exp="AverData(15,6)" align="center" onmouseover="showTip(event)">　</td>
    <td align="center">　</td>
    </tr>
    </table>
    </div>
    <div align="center">
    <table border="0" width="600" id="table4" style="border-collapse: collapse">
    <tr>
    <td>负责人：</td>
    <td>统计员：</td>
    </tr>
    </table>
      

  6.   


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk">
      </head>
       <style>
       .over {background-color:898989;};
       .out {background-color:989898;};
       .shadowDiv {
      display: none;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px : left : 0px;
      background-color: #999;
      filter: alpha(opacity = 70);
      opacity: 0.7;
      z-index: 111111111
    }
    .formDiv {
      width: 200px;
      height: 100px;
      position: absolute;
      top:280px;
      background-color: #FFF;
      opacity: 0.7;
    }

       </style>
        <script language=javascript> function conf(){
    document.getElementById("div1").style.display = "none" ;
    o.parentNode.parentNode.parentNode.childNodes[0].innerHTML = document.getElementById("name1").value ;
    }
    function cancel(){
    document.getElementById("div1").style.display = "none" ;
    }
    var o ;
    function error(obj){
    o = obj ;
    document.getElementById("name1").value = "" ;
    document.getElementById("div1").style.Height = document.body.clientHeight ;
    document.getElementById("div1").style.width = document.body.clientWidth ;
    document.getElementById("div1").style.display = "block" ;
    }
    function over(obj){
    obj.className = "over" ;
    obj.childNodes[1].childNodes[0].style.display = "block" ;
    }
    function out(obj){
    obj.className = "out" ;
    obj.childNodes[1].childNodes[0].style.display = "none" ;
    }
        </script>
      <body >
      <div id="div1" class="shadowDiv" align="center">
    <div class="formDiv">
    <br>
    <table width="90%">
    <tr>
    <td width="40%">输入:</td>
    <td><input width="10" type="text" name="name1" id="name1"></td>
    </tr>
    </table>
    <br>
    <input type="button" value="修改" onclick="conf()">&nbsp;
    <input type="button" value="取消" onclick="cancel()">

    </div>
    </div>
    <table cellSpacing="0" cellPadding="1" border="1">
    <tr class="out" onmouseover="over(this)" onmouseout="out(this)">
    <td width="200">1</td>
    <td width="100"><div style="display:none"><a href="#" onclick="error(this)">参数纠错</a></div></td>
    </tr>
    <tr class="out" onmouseover="over(this)" onmouseout="out(this)">
    <td width="200">2</td>
    <td><div style="display:none"><a href="#" onclick="error(this)">参数纠错</a></div></td>
    </tr>
    <tr class="out" onmouseover="over(this)" onmouseout="out(this)">
    <td width="200">3</td>
    <td><div style="display:none"><a href="#" onclick="error(this)">参数纠错</a></div></td>
    </tr>
    <tr class="out" onmouseover="over(this)" onmouseout="out(this)">
    <td width="200">4</td>
    <td><div style="display:none"><a href="#" onclick="error(this)">参数纠错</a></div></td>
    </tr>
    <tr class="out" onmouseover="over(this)" onmouseout="out(this)">
    <td width="200">5</td>
    <td><div style="display:none"><a href="#" onclick="error(this)">参数纠错</a></div></td>
    </tr>
    </table>
    </body>
    </html>