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>
  • 相关阅读:
    我用到的存储过程
    yii2图片处理扩展yii2-imagine的使用
    yii2——自定义widget
    YII2之 Scenario
    PHP获取某月天数
    docker版wordpress
    RBAC中 permission , role, rule 的理解
    mysql开启远程连接
    windows系统和ubuntu虚拟机之间文件共享——samba
    php生成随机字符串
  • 原文地址:https://www.cnblogs.com/goody9807/p/631263.html
Copyright © 2011-2022 走看看