zoukankan      html  css  js  c++  java
  • DOM操作创建表格

    为了方便构建表格,HTML DOM为<table>、<tbody>和<tr>元素添加了一些属性和方法。

    为<table>元素添加的属性和方法如下。

    • caption:保存着对<caption>元素(如果有)的指针。
    • tBodies:是一个<tbody>元素的HTMLCollection。
    • tFoot:保存着对<tfoot>元素(如果有)的指针。
    • tHead:保存着对<thead>元素(如果有)的指针。
    • rows:是一个表格中所有行的HTMLCollection。
    • createTHead():创建<thead>元素,将其放到表格中,返回引用。
    • createTFoot():创建<tfoot>元素,将其放到表格中,返回引用。
    • createCaption():创建<caption>元素,将其放到表格中,返回引用。
    • deleteTHead():删除<thead>元素。
    • deleteTFoot():删除<tfoot>元素。
    • deleteCaption():删除<caption>元素。
    • deleteRows(pos):删除指定位置的行。
    • insertRows(pos):向rows集合中的指定位置插入一行。

    为<tbody>元素添加的属性和方法如下。

    • rows:保存着<tbody>元素中行的HTMLCollection。
    • deleteRows(pos):删除指定位置的行。
    • insertRows(pos):向rows集合中的指定位置插入一行,返回对新插入的引用。

    为<tr>元素添加的属性和方法如下。

    • cells:保存着<tr>元素中单元格的HTMLCollection。
    • deleteCell(pos):删除指定位置的单元格。
    • insertCell(pos):向cells集合中的指定位置插入一个单元格,返回对新插入单元格的引用。

    使用这些属性和方法,可以极大地减少创建表格所需的代码数量。例如:

     1 //创建table
     2 var table = document.createElement("table");
     3 table.border = 1;
     4 table.width = "100%";
     5 
     6 //创建tbody
     7 var tbody = document.createElement("tbody");
     8 table.appendChild(tbody);
     9 
    10 //创建第一行
    11 tbody.insertRow(0);
    12 tbody.rows[0].insertCell(0);
    13 tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
    14 tbody.rows[0].insertCell(1);
    15 tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));
    16 
    17 //创建第二行
    18 tbody.insertRow(1);
    19 tbody.rows[1].insertCell(0);
    20 tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
    21 tbody.rows[1].insertCell(1);
    22 tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));
    23 
    24 //将表格添加到文档主体中
    25 document.body.appendChild(table);
  • 相关阅读:
    SQL-LINQ-Lambda 语法对照
    C#.NET面向对象(语法点)
    4.5 基于STM32+MC20远程短信控制开关
    4.4 使用STM32控制MC20进行GPS帧数据解析
    4.3 使用STM32控制MC20进行GPRS通讯
    4.2 使用STM32控制MC20发送短信
    4.1 使用STM32控制MC20拨打电话
    3.6.使用STC89C52控制MC20解析GPS的经纬度数据上传到指定服务器
    3.5.基于STC89C52+MC20的短信远程控制开关LCD1602显示
    3.4 使用STC89C52控制MC20解析GPS的经纬度数据在LCD1602上显示
  • 原文地址:https://www.cnblogs.com/Yvette1014/p/5462750.html
Copyright © 2011-2022 走看看