zoukankan      html  css  js  c++  java
  • [原创]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>


     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>
  • 相关阅读:
    php读取excel日期类型数据的例子
    asp.net字符串分割函数用法
    asp.net页面与页面之间传参数值
    css3中定义required,focus,valid和invalid样式
    java写入文件的几种方法小结
    php file_get_contents与curl性能比较
    Jquery库及其他库之间的$命名冲突解决办法
    [转]DOS特殊字符转义方法
    [转]删除SQL Server Management Studio中保存的帐户信息
    Jpeg2000 简介
  • 原文地址:https://www.cnblogs.com/goody9807/p/631263.html
Copyright © 2011-2022 走看看