DOM操作创建表格

为了方便构建表格,HTML DOM为

、和元素添加了一些属性和方法。

元素添加的属性和方法如下。

  • caption:保存着对
元素的HTMLCollection。
  • tFoot:保存着对
  • 元素(如果有)的指针。
  • tHead:保存着对
  • 元素(如果有)的指针。
  • rows:是一个表格中所有行的HTMLCollection。
  • createTHead():创建
  • 元素,将其放到表格中,返回引用。
  • createTFoot():创建
  • 元素,将其放到表格中,返回引用。
  • createCaption():创建
  • 元素。
  • deleteTFoot():删除
  • 元素。
  • deleteCaption():删除
  • 元素添加的属性和方法如下。

    • rows:保存着
    元素中行的HTMLCollection。
  • deleteRows(pos):删除指定位置的行。
  • insertRows(pos):向rows集合中的指定位置插入一行,返回对新插入的引用。
  • 元素添加的属性和方法如下。

    • cells:保存着
    元素中单元格的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);

     

    转载于:https://www.cnblogs.com/Yvette1014/p/5462750.html

    你可能感兴趣的:(DOM操作创建表格)

    元素(如果有)的指针。
  • tBodies:是一个
  • 元素,将其放到表格中,返回引用。
  • deleteTHead():删除
  • 元素。
  • deleteRows(pos):删除指定位置的行。
  • insertRows(pos):向rows集合中的指定位置插入一行。