●●●100分●●●如何点一下按钮就在页面中创建一个DIV？？？？

移动tr的，看这一个：<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<script language="javascript">
var beginMoving=false;
function MouseDownToMove(obj){
obj.style.zIndex=1;
obj.mouseDownY=event.clientY;
obj.mouseDownX=event.clientX;
beginMoving=true;
obj.setCapture();
}function MouseMoveToMove(obj){
if(!beginMoving) return false;
obj.style.top = (event.clientY-obj.mouseDownY);
obj.style.left = (event.clientX-obj.mouseDownX);
}
function MouseUpToMove(obj){
if(!beginMoving) return false;
obj.releaseCapture();
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=0;
beginMoving=false;
var tempTop=event.clientY-obj.mouseDownY;
var tempRowIndex=(tempTop-tempTop%25)/25;
if(tempRowIndex+obj.rowIndex <0 )tempRowIndex=-1;
else tempRowIndex=tempRowIndex+obj.rowIndex;
if(tempRowIndex >= obj.parentElement.rows.length-1) tempRowIndex = obj.parentElement.rows.length-1;
obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);
}</script>
</head>
<body >
用鼠标移动TR<br>
<TABLE WIDTH="300" BORDER="1" >

<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=blue>0</TD><TD>0</TD><TD>0</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=black>1</TD><TD>1</TD><TD>1</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=red>2</TD><TD>2</TD><TD>2</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>3</TD><TD>3</TD><TD>3</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>4</TD><TD>4</TD><TD>4</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>5</TD><TD>5</TD><TD>5</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>6</TD><TD>6</TD><TD>6</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>7</TD><TD>7</TD><TD>7</TD></TR> </script>
</TABLE> </body>
</html>

动态加减tr的，看这个：<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title><style>
TD,INPUT{ font-size:12; }
</style>
</head><body bgcolor=EEEEEE>
<form name="frm" action="about:结果页面" method=post >
<h4 align=center>JK的动态明细示例</h4><table align="center" bordercolor=cccccc border=1  width=100% >
<tr>
<td width=500>
</td>
<td align=right>
      <input type="button"  value="增加" class="bottom" onclick="addDetailProcess();"> 
      <input type="button"  value="删除" class="bottom" onclick="delDetailProcess();"> 
      <input type="button"  value="完成" class="bottom" onclick="submitProcess();">

</td>
</tr>
</table>
<div width=100% id=thedetailtableDIV>
<table align="center" bordercolor=cccccc border=1 width=100% >
  <tr bgcolor=eeeeee id="trDetailTitles">
    <td ><input type=checkbox onclick="selectallcheckbox(this)"></td>
    <td >明细ID*</td>
    <td >明细NAME</td>
  </tr>
  <tbody id="tbDetailUsed" >
<tr>
<td ><input type="checkbox" name="record_select" ></td>
<td ><input type="text" name="detail_id" value='' ></td>
<td ><input type="text" name="detail_name" value='' ></td>
</tr> <tr height=0 ><td colspan=100 height=0 > 合计</td></tr>
  </tbody> </table>
</div>
</form>
<table id="tbDetailPrepare" style="display:none">
<tr>
<td ><input type="checkbox" name="record_select" ></td>
<td ><input type="text" name="detail_id" value='' ></td>
<td ><input type="text" name="detail_name" value='' ></td>
</tr>
</table>
<input name="theHistoryRecord" type=hidden value="">
</body></html><script language=javascript> window.onload = historyOncemore;
window.onbeforeunload = fixHistory; function fixHistory() //记住历史
{
document.all("theHistoryRecord").value=document.all("thedetailtableDIV").innerHTML.replace(/\n/g,"");
} function historyOncemore() //恢复历史
{
if (document.all("theHistoryRecord").value!="")
{document.all("thedetailtableDIV").innerHTML=document.all("theHistoryRecord").value;
}
} function selectallcheckbox(obj) //全选或全不选
{
var tureorfalse=obj.checked;
var theDetail=tbDetailUsed.rows;
for(var i=0;i<theDetail.length-1;i++)
{
theDetail[i].all("record_select").checked=tureorfalse;
}
}

function addDetailProcess(afterRowIndex) //增加明细
{
var alltbDetailUsed= document.all("tbDetailUsed").rows;
var theFirstSelectedDetail;
if (afterRowIndex==null)
{
  theFirstSelectedDetail=alltbDetailUsed.length-2;
}
else theFirstSelectedDetail=afterRowIndex;
var newRow = document.all("tbDetailPrepare").rows[0].cloneNode(true);
var desRow = alltbDetailUsed[theFirstSelectedDetail+1];
desRow.parentElement.insertBefore(newRow,desRow ); }

function delDetailProcess() //删除明细
{
var alltbDetailUsed= document.all("tbDetailUsed").rows;
if (confirm("确定选择正确并且要将这些明细删除")==false) return false;
for(var i=0;i<alltbDetailUsed.length-1;i++)
{
if (alltbDetailUsed[i].all("record_select").checked==true)
{
document.all("tbDetailUsed").deleteRow(i);
i=i-1;
}
}
} function submitProcess()
{
      document.frm.submit();
}
</script>

不过你所说的，有可能不是你想要的，
你想要的，可能是这个：<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Page Selection</title>
<style>
td{white-space:nowrap};
body{margin-left:0;margin-right:0;margin-top=0;margin-bottom=0};
</style>
</head><body bgcolor=eeeeee><table>
<tr >
<td>
<select name=SrcSelect size=6 style="font-size:11pt;width=200;height=160px" multiple >
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
<option value="4">test4</option>
<option value="5">test5</option>
<option value="6">test6</option>
</select>
</td>
<td align="center">
<input align="left" type=button value="→"  onclick="moveLeftOrRight(document.all.SrcSelect,document.all.ObjSelect)"  ><br><br>
<input align="left" type=button value="←"  onclick="moveLeftOrRight(document.all.ObjSelect,document.all.SrcSelect)"  >
</td>
<td>
<select name=ObjSelect size=6 style="font-size:11pt;width=200;height=160px" multiple >
<option value="11">test11</option>
<option value="12">test12</option>
<option value="13">test13</option>
<option value="14">test14</option>
<option value="15">test15</option>
<option value="16">test16</option>
</select>
</td>
<td>
<input type=button value="↑"  onclick="moveUp()" ><br><br>
<input type=button value="↓"  onclick="moveDown()" >
</td>
</tr>
</table>
</body>

<script language=javascript>
function moveUp()
{
var theObj=document.all.ObjSelect;
for(var i=1;i<theObj.length;i++)
{
if( theObj.options[i].selected && !theObj.options[i-1].selected )
{
theObj.options[i].swapNode(theObj.options[i-1]);
}
}
}

function moveDown()
{
var theObj=document.all.ObjSelect;
for(var i=theObj.length-2;i>-1;i--)
{
if( theObj.options[i].selected && !theObj.options[i+1].selected )
{
theObj.options[i].swapNode(theObj.options[i+1]);
}
}
}


function moveLeftOrRight(fromObj,toObj)
{
var lengthOfToObj=toObj.length;
for(var i=fromObj.length-1;i>-1;i--)
{
if(fromObj.options[i].selected)
{
toObj.add(new Option(fromObj.options[i].text,fromObj.options[i].value),lengthOfToObj);
toObj.options[lengthOfToObj].selected=true;
fromObj.options[i].removeNode(true);
}
}
}



</script>

www.msdn.com
search Div Or CreatecreateElement and so on!

JK_10000(JK) ( ) 信誉：121 u so funny

我现在遇到的问题是我用同样的方法在Form中创建一个隐藏域却创建不了！！！

谢谢大家： to meizz(梅花雪)
我用了你的方法，创建成功了，但是这个DIV不能拖动，只是追加在页面的最底部了。我是这样改的，不知道哪里错了
function CreatObject(){
var s = '<table border="1" width="100%" height="100%"><tr><td> </td></tr><tr><td height="50"> </td></tr></table>';
var div = document.createElement("DIV");
div.innerHTML = s;
div.style.backgroundColor="yellow"; //position你自己加
div.style.position="absolute";
div.onmousedown="moveit(this)";
document.body.appendChild(div);
}

<input type="button" value="增加" name="B3" onclick="add()">
<script language=javascript>
function add()
{
var sj;
time=new Date();
sj=time.getMilliseconds();
var div=document.createElement("DIV");
div.id="div"+sj;
div.innerHTML="<table border=1 align=center id='tb"+sj+"'><tr><td>"+sj+"</td></tr></table>";
div.style.backgroundColor="green";
div.onmousedown="moveit(this)";
div.contentEditable=true
document.body.appendChild(div);
}
</script>

拖动div需要设置
contentEditable=true

我试过，这样直接可以拖拉
<input type="button" value="增加" name="B3" onclick="add()">
<script language=javascript>
function add()
{
var sj;
time=new Date();
sj=time.getMilliseconds();
var div=document.createElement("DIV");
div.id="div"+sj;
div.innerHTML="<table border=1 align=center id='tb"+sj+"' bgcolor=red width='100%'><tr><td>"+sj+"</td></tr></table>";
div.style.backgroundColor="green";
div.contentEditable=true
document.body.appendChild(div);
}
</script>

谢谢，可是，我说的拖动是指的拖动DIV层，不是改变表格的尺寸。就像MSN里面的拖动一样，拖动的代码我已经写好了，现在就是这个新建的DIV响应不了onmousedown事件，我就是写成这样div.onmousedown="alert('hello ')";都不行

新建<DIV>时,<DIV>就要加onmousedown事件,如下
<div onMouseDown="function1()"></div>

给div动态添加事件好像不能你那样写

OK,可以了，但是问题又出来了，我用同样的方法在form里面创建了一个隐藏域竟然不行？？？？
<script language=javascript>
function add()
{
var obj=document.createElement("<input type='hidden'>");
document.body.appendChild(obj);
}
</script>
奇怪了！！！

事件好像还不支持动态添加，可以这样
<input type="button" value="增加" name="B3" onclick="add()">
<script language=javascript>
function add()
{
var sj;
time=new Date();
sj=time.getMilliseconds();
var div=document.createElement("DIV");
div.id="div"+sj;
div.innerHTML="<table border=1 align=center id='tb"+sj+"' bgcolor=red width='100%'><tr><td>"+sj+"</td></tr></table>";
div.style.backgroundColor="green";
div.contentEditable=true
document.body.appendChild(div);
}function document.onmousedown()
{
if(event.srcElement.tagName=="DIV")
alert(event.srcElement.id);
}
</script>

你写错了，下面的可以<script language=javascript>
function add()
{
sj=new Date();
var obj=document.createElement("INPUT");
obj.type="hidden";
obj.id="hd";
document.body.appendChild(obj);
hd.value=sj.getMilliseconds();
alert(hd.value)
}
</script>
<input type="button" value="test" name="B3" onclick="add()">

document.createElement("a") a必须为元素,如input，div，table等

<body>
</body>
<SCRIPT LANGUAGE="JavaScript" defer>

</SCRIPT>

学习，
document.body.appendChild(obj);
是加在页面最后，如果页面有2 个table，要加在2
个table中间怎么办？

学习，
document.body.appendChild(obj);
是加在页面最后，如果页面有2 个table，要加在2
个table中间怎么办？
document.all.table1.appendChild(obj);

div.onmousedown=function(){moveit(this)};

如果页面有2 个table，要加在2
个table中间怎么办？
table2.parentNode.insertBefore(div, table2);

调试易

●●●100分●●●如何点一下按钮就在页面中创建一个DIV？？？？

解决方案 »