zoukankan      html  css  js  c++  java
  • 初学者 简单的自动创建表格,面试必备

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    #content {
    500px;
    height: 500px;
    border: 1px solid blue;
    }
    </style>

    <script>

    onload = function () {

    var btnCrea = document.getElementById("btnCrea"); //button for create a table
    var content = document.getElementById("content"); //get the content for inner text

    btnCrea.onclick = function () {
    //create a table
    var table = document.createElement("table");
    table.width = "400px";
    table.height = "400px";
    table.border = "1px";
    table.style.padding = "0";
    table.style.borderCollapse = "collapse";

    var rows = document.getElementById("rows").value; //row
    var cols = document.getElementById("cols").value; //cols

    //Create rows
    for (var i = 0; i < rows; i++) {
    var tr = document.createElement("tr");
    for (var j = 0; j < cols; j++) {
    var td = document.createElement("td");
    td.innerHTML = i + "" + j;
    tr.appendChild(td);
    }
    table.appendChild(tr);
    }
    content.appendChild(table);
    };
    };

    </script>
    </head>
    <body>
    行:<input type="text" id="rows" />
    列:<input type="text" id="cols" />
    <input type="button" value="Create" id="btnCrea" /><br />
    <br />
    <div id="content"></div>
    </body>
    </html>

  • 相关阅读:
    javascript Date类的扩展
    软件工程师好了歌 (转)
    您可能不知道的.Net2.0小技巧
    您未必知道的Js技巧
    复活吧,架构师!
    技巧系列文章
    不要使用paddingtop控制内容开始的位置
    JQuery Offset实验与应用(转载)
    2008最佳Windows应用程序
    精选15个国外CSS框架
  • 原文地址:https://www.cnblogs.com/fuguoliang/p/4006765.html
Copyright © 2011-2022 走看看