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>
  • 相关阅读:
    jQuery.extend
    Topshelf便捷创建Windows服务
    cron表达式
    定时调度框架:Quartz.net
    sqlserver自定义函数
    HTML dom document 对象
    正则表达式之 数据验证 与 文本替换
    JavaScript 之 DOM 与 BOM
    CSS 之pseudo-classes 与pseudo-element的异同
    CSS中的 position与Grid Layout
  • 原文地址:https://www.cnblogs.com/goody9807/p/631263.html
Copyright © 2011-2022 走看看