[原创]javascript中如何控制动态生成的表格位置?
通过页面上的几个输入框输来确定生成表格的位置
<script>
function TestSecond()
{
var div=document.getElementById("div");
var table=document.createElement("table");
table.border=1;
var xNum=document.getElementById("textX").value;
var yNum=document.getElementById("textY").value;
var textRow=document.getElementById("textRow");
var textCell=document.getElementById("textCell");
for(var i=0;i<textRow.value;i++)
{
var row=table.insertRow();
for(var j=0;j<textCell.value;j++)
{
var cell=row.insertCell();
cell.innerText="***";
cell.width=50;
}
}
div.style.left=xNum;
div.style.top =yNum;
div.innerText="";
div.appendChild(table);
}
</script>
function TestSecond()
{
var div=document.getElementById("div");
var table=document.createElement("table");
table.border=1;
var xNum=document.getElementById("textX").value;
var yNum=document.getElementById("textY").value;
var textRow=document.getElementById("textRow");
var textCell=document.getElementById("textCell");
for(var i=0;i<textRow.value;i++)
{
var row=table.insertRow();
for(var j=0;j<textCell.value;j++)
{
var cell=row.insertCell();
cell.innerText="***";
cell.width=50;
}
}
div.style.left=xNum;
div.style.top =yNum;
div.innerText="";
div.appendChild(table);
}
</script>
1 <form id="Form1" method="post" runat="server">
2<table align="center">
3 <tr>
4 <td>行数:</td>
5 <td><input type="text" id="textRow"/>
6 </td>
7 </tr>
8 <tr>
9 <td>列数:</td>
10 <td><input type="text" id="textCell"/>
11 </td>
12 </tr>
13 <tr>
14 <td>座标X:</td>
15 <td><input type="text" id="textX"/>
16 </td>
17 </tr>
18 <tr>
19 <td>座标Y:</td>
20 <td><input type="text" id="textY"/>
21 </td>
22 </tr>
23 <tr>
24 <td align="center" colspan="2"><input type="button" value="生成表格" onClick="TestSecond();"/></td>
25 </tr>
26 </table>
27 <p>
28
29 <div id="div" style="position:absolute;">
30 </div>
31
32 </form>
2<table align="center">
3 <tr>
4 <td>行数:</td>
5 <td><input type="text" id="textRow"/>
6 </td>
7 </tr>
8 <tr>
9 <td>列数:</td>
10 <td><input type="text" id="textCell"/>
11 </td>
12 </tr>
13 <tr>
14 <td>座标X:</td>
15 <td><input type="text" id="textX"/>
16 </td>
17 </tr>
18 <tr>
19 <td>座标Y:</td>
20 <td><input type="text" id="textY"/>
21 </td>
22 </tr>
23 <tr>
24 <td align="center" colspan="2"><input type="button" value="生成表格" onClick="TestSecond();"/></td>
25 </tr>
26 </table>
27 <p>
28
29 <div id="div" style="position:absolute;">
30 </div>
31
32 </form>