美文网首页
表格创建的方法

表格创建的方法

作者: QinRenMin | 来源:发表于2018-06-03 13:57 被阅读0次

创建表格,so easy啊,今天就创建表格这个小实例,来写写不一样的实现方法

  • html标签实现
<div>
    <table border="1" width="300px">
        <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
        </tbody>
    </table>

</div>
table_1.png
  • js实现
let table = document.createElement("table"); //创建表格
table.border = "1";
table.bgColor = "green";
table.width = "300px";

let tbody = document.createElement("tbody");
table.appendChild(tbody);
//创建第一行
let row1 = document.createElement("tr");
tbody.appendChild(row1);

let c11 = document.createElement("td");
c11.appendChild(document.createTextNode("5"));
row1.appendChild(c11);


let c12 = document.createElement("td");
c12.appendChild(document.createTextNode("6"));
row1.appendChild(c12);

//创建第二行

let row2 = document.createElement("tr");
tbody.appendChild(row2);

let c21 = document.createElement("td");
c21.appendChild(document.createTextNode("7"));
row2.appendChild(c21);

let c22 = document.createElement("td");
c22.appendChild(document.createTextNode("8"));
row2.appendChild(c22);

 document.body.appendChild(table);
table_2.png
  • js的方法实现
let table = document.createElement("table"); //创建表格
table.border = "1";
table.bgColor = "green";
table.width = "300px";

let tbody = document.createElement("tbody");
table.appendChild(tbody);
//创建第一行
let row1 = document.createElement("tr");
tbody.appendChild(row1);

let c11 = document.createElement("td");
c11.appendChild(document.createTextNode("5"));
row1.appendChild(c11);


let c12 = document.createElement("td");
c12.appendChild(document.createTextNode("6"));
row1.appendChild(c12);

//创建第二行

let row2 = document.createElement("tr");
tbody.appendChild(row2);

let c21 = document.createElement("td");
c21.appendChild(document.createTextNode("7"));
row2.appendChild(c21);

let c22 = document.createElement("td");
c22.appendChild(document.createTextNode("8"));
row2.appendChild(c22);

 document.body.appendChild(table);
table_3.png

这些都是很简单的操作啦,有兴趣的小伙伴可以尝试一下哟!

相关文章

  • 表格创建的方法

    创建表格,so easy啊,今天就创建表格这个小实例,来写写不一样的实现方法 html标签实现 js实现 js的方...

  • Java图形化:Swing表格的使用

    利用JTable类直接创建表格 创建表格: 在JTable类中除了默认的构造方法之外,还提供了利用指定表格列名数组...

  • 2019-11-06超智能表格

    Day 4 超智能表格 一、创建超智能表格 方法一:插入一表格(默认选中区域)一确定 方法二:Ctrl+T 快速创...

  • Java图形化:Swing表格的使用

    在JTable类中除了默认的构造方法之外,还提供了利用指定表格列名数组和表格数据数组创建表格的构造方法,如下: J...

  • 超级智能表

    1、轻松创建:有两个方法,一种方法是打开表格,在插入中选择表格,弹出窗口,会默认数据区域,点确定,表格发生了变化,...

  • Numbers入门 --- 第二章 走进 Numbers

    创建电子表格文件 创建一个新的电子表格文件,有 3 种方法可以选择: A. 从一个空白的模板开始,自己定义电子表格...

  • word中的表格基础介绍

    1.创建基础表格 方法一:依次单击【插入】—【表格】,在【表格】下拉按钮中通过拖动鼠标来确定单元格数量,最后单击鼠...

  • 表格

    创建表格 在HTML网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法格式如下: 单元格内的...

  • 第5单元 个性月历

    创建表格 输入表格 调整与修必表格 美化表格

  • mysql基本操作

    创建数据库、使用数据库、查看表格: 创建表格: 插入数据到表格: 查看数据: 创建索引: 使用索引的好处: 右侧通...

网友评论

      本文标题:表格创建的方法

      本文链接:https://www.haomeiwen.com/subject/uysjsftx.html