js如何动态创建表格（两种方法）

时间：2021-07-14 14:46:57

js如何动态创建表格（两种方法）

一、总结

一句话总结：

1、方法一：写好创建表格的html代码，将之赋值给div的innerHTML。

2、方法二、直接用创建好的table元素的方法insertRow和insertCell来实现。

3、指定行列创建表格：通过循环。

1、table元素的动态（js中）常用属性有哪些？

解答：tab.width=500;  tab.border=2;。

2、如何得到某个div的第一个table？

解答：var ta=div1.getElementsByTagName('table')[0]。

3、html中元素如何移除自己？

解答：先找父节点，然后移除父节点的子节点。ta.parentNode.removeChild(ta)。

4、insertRow(i)是谁的方法？

解答：table的。

5、insertCell(j)是谁的属性？

解答：row的，tab.rows[i].insertCell(j).innerHTML=i+''+j;。

6、如何访问表格中的第i行的第j列的元素？

解答： tab.rows[i].cells[j].style.background='green'。

7、如何通过创建html语句的方式给div加表格？

解答：var tab='<table border=1 width=500">'  tab+='</table>';  div1.innerHTML=tab。

二、js如何动态创建表格（两种方法）

1、创建指定行，列的表格的案例说明

    • 实例描述：

      根据用户输入数值，创建指定行，列的表格

      案例006/007分别采用不同的思路实现同样的功能

2、表格相关的属性和方法

1.1 Table 对象集合
  • cells[] 返回包含表格中所有单元格的一个数组。

    语法：tableObject.cells[]

  • rows[] 返回包含表格中所有行的一个数组。

    rows 集合返回表格中所有行的一个数组。该集合包括 thead、tfoot 和 tbody 中定义的所有行。

  • tBodies[] 返回包含表格中所有 tbody 的一个数组。

    注：不常用

1.2 Table 对象方法
  • createCaption() 为表格创建一个 caption 元素。
  • createTFoot() 在表格中创建一个空的 tFoot 元素。
  • createTHead() 在表格中创建一个空的 tHead 元素。
  • deleteCaption() 从表格删除 caption 元素以及其内容。
  • deleteRow() 从表格删除一行。
  • deleteTFoot() 从表格删除 tFoot 元素及其内容。
  • deleteTHead() 从表格删除 tHead 元素及其内容。
  • insertRow() 在表格中插入一个新行。
1.3 Table 对象常用属性
  • frame 设置或返回表格的外部边框。
  • rules 设置或返回表格的内部边框（行线）。
  • caption 对表格的 caption 元素的引用。
  • cellPadding 设置或返回单元格内容和单元格边框之间的空白量。
  • cellSpacing 设置或返回在表格中的单元格之间的空白量。
  • summary 设置或返回对表格的描述（概述）。
  • tFoot/tHead 返回表格的 TFoot /tHead对象。如果不存在该元素，则为 null。
  • border/width/id......
1.4 TableRow 对象
    • TableRow 对象方法
      • deleteCell() 删除行中的指定的单元格

        语法：tablerowObject.deleteCell(index)

      • insertCell() 在一行中的指定位置插入一个空的 td 元素。

        tablerowObject.insertCell(index)

        返回值：一个 TableCell 对象，表示新创建并被插入的 元素。

    • TableRow 对象属性
      • vAlign 设置或返回在行中的数据的垂直排列方式。

        语法：tablerowObject.vAlign=top|bottom|middle|baseline

      • rowIndex 返回该行在表中的位置。

        语法：tablerowObject.rowIndex

      其他：align/innerHTML/id......

1.5 TableCell 对象
    • TableCell 对象属性
      • abbr 设置或返回单元格中内容的缩写版本。
      • axis 设置或返回相关单元格的一个逗号分隔的列表。
      • cellIndex 返回单元格在某行的单元格集合中的位置。
      • colSpan 单元格横跨的列数。
      • rowSpan 设置或返回单元格可横跨的行数。
      • vAlign/width/id/align......

3、案例截图

js如何动态创建表格（两种方法）

js如何动态创建表格（两种方法）

4、代码

代码1：
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <style type="text/css">

     </style>

 </head>

 <body>

     <h3>动态创建表格1</h3>

     行数 <input type="text" value="5" id="rows">

     列数 <input type="text" value="5" id="cols">

     <input type="button" value="创建表格" onclick="creatTab()">

     <div id="div1"></div>

     <script>

     function creatTab(){

         rows=document.getElementById('rows').value

         cols=document.getElementById('cols').value

         div1=document.getElementById('div1')

         // alert(rows+'\n'+cols)

         var tab='<table border=1 width=500">'

         for(var i=0;i<rows;i++){

             tab+='<tr>'

             for(var j=0;j<cols;j++){

                 tab+="<td style='background:green'>"+i+j+"</td>"

             }

              tab+='</tr>'

         }

         tab+='</table>';

         div1.innerHTML=tab

     }

     </script>

 </body>

 </html>
代码2：
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <style type="text/css">

     </style>

 </head>

 <body>

     <h3>动态创建表格1</h3>

     行数 <input type="text" value="5" id="rows">

     列数 <input type="text" value="5" id="cols">

     <input type="button" value="创建表格" onclick="creatTab()">

     <div id="div1"></div>

     <script>

     function creatTab(){

         rows=document.getElementById('rows').value

         cols=document.getElementById('cols').value

         div1=document.getElementById('div1');

         var ta=div1.getElementsByTagName('table')[]

         if (ta) {ta.parentNode.removeChild(ta)}

         var tab = document.createElement("table");

         tab.width=500;

         tab.border=2;

         for(var i=0;i<rows;i++){

             tab.insertRow(i)

             for(var j=0;j<cols;j++){

                 tab.rows[i].insertCell(j).innerHTML=i+''+j;

                 tab.rows[i].cells[j].style.background='green'

             }

         }

         document.getElementById("div1").appendChild(tab)

     }

     </script>

 </body>

 </html>

三、测试题-简答题

1、table元素的动态（js中）常用属性有哪些？

解答：tab.width=500;  tab.border=2;。

2、如何得到某个div的第一个table？

解答：var ta=div1.getElementsByTagName('table')[0]。

3、html中元素如何移除自己？

解答：先找父节点，然后移除父节点的子节点。ta.parentNode.removeChild(ta)。

4、insertRow(i)是谁的方法？

解答：table的。

5、insertCell(j)是谁的属性？

解答：row的，tab.rows[i].insertCell(j).innerHTML=i+''+j;。

6、如何访问表格中的第i行的第j列的元素？

解答： tab.rows[i].cells[j].style.background='green'。

7、如何通过创建html语句的方式给div加表格？

解答：var tab='<table border=1 width=500">'  tab+='</table>';  div1.innerHTML=tab。

相关文章