我想用javascript的createElement()动态创建两行一列的表格怎么实现,当单击按钮是它就在旁边创建,被创建的表格呈横行排列,当单击表格的时候可以拖动表格,我的代码是这样的,但是运行不了,而且不完整求高手帮帮。
<html><head><title>javascript example</title>
</head>
<body id="thebody"><input type="text" id="text1"><button onclick="clone()">确定</button>
<script >
<!--
function clone(){
  var table=document.createElement("table");
   table.setAttribute("width",100);
   table.setAttribute("color","red");
    table.setAttribute("id","thetable");
    table.border=1;
  var tbody=document.createElement("tbody");
  var tr=   document.createElement("tr");
 var  td   =document.createElement("td");
   td.appendChild(text1.value);
   tr.appendChild(td);
   tbody.appendChild(tr);
   table.appendChild(tbody);
   thebody.appendChild(table);
 }
 -->
</script>
</body>
</html>

解决方案 »

  1.   

    代码我改进了一下以下就是但是还是不能实现拖动功能
     help help
    <html><head><title>javascript example</title>
    <style type="text/css">
    <!--
    table{
      border-color:#FF0099
      display:inline}
    -->
    </style>
     
    </head>
    <body id="thebody"><input type="text" id="text1"><button onclick="clone()">确定</button>
    <script >
    <!--
    function clone(){
      var table=document.createElement("table");
       table.setAttribute("width",100);
       
        table.id="thetable";
        table.border=1;
      var tbody=document.createElement("tbody");
      var tr=   document.createElement("tr");
     var  td   =document.createElement("td");
       td.appendChild(document.createTextNode(text1.value));
       tr.appendChild(td);
       tbody.appendChild(tr);
       var tr1=document.createElement("tr"); 
       var td1=document.createElement("td");
       td1.appendChild(document.createTextNode(text1.value));
       tr1.appendChild(td1);
        tbody.appendChild(tr1);
       table.appendChild(tbody);
       thebody.appendChild(table);
    var t=document.getElementById("thetable");
       t.attachEvent("onmousedown",f_mdown(this));
        t.attachEvent("onmousemove",f_move(this));   
        var currentMoveObj = null;         //当前拖动对象
    var relLeft;         //鼠标按下位置相对对象位置
    var relTop;
    function f_mdown(obj)
    {
     //当对象被按下时,记录该对象
     currentMoveObj = obj;                
     //setCapture()可以让对象捕捉到鼠标事件,跟随着鼠标做出响应
     currentMoveObj.setCapture();
     //设置对象的定位方式为absolute,便于计算拖动位置
     currentMoveObj.style.position = "absolute";
     //记录鼠标按下时距离被移动物体的左上角的偏移量
     //以便在移动鼠标的时候正确计算位移
     relLeft = event.x - currentMoveObj.style.pixelLeft;
     relTop = event.y - currentMoveObj.style.pixelTop;
    }
    window.document.attachEvent('onmouseup',function(){
     //releaseCapture()执行和setCapture()相反的操作
     currentMoveObj.releaseCapture();
     currentMoveObj = null;      //当鼠标释放时同时释放拖动对象
    });

    function f_move(obj)
    {
    if(currentMoveObj != null)
    {
    //真正移动鼠标的时候,计算被移动物体的实际位置
    currentMoveObj.style.pixelLeft=event.x-relLeft;
    currentMoveObj.style.pixelTop=event.y-relTop;
    }
    }
    }
     -->
    </script>
    </body>
    </html>
      

  2.   

    想要拖动的话用层DIV实现吧把TABLE放进DIV中