我想用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>
<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>
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>