示例

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

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

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

第一种示例

<!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>

第二种示例

<!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')[0]

    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。

表格相关的属性和方法

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......

JavaScript 实现点击显示和隐藏表格

1、给 table 或者table里面的元素添加点击事件，

2、然后判断当前表格的数据显示或者隐藏，

3、然后通过display属性显示（非none）或者隐藏（值为none）表格中的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示文档</title>
    <style type="text/css">
    </style>
</head>
<body>

<table id="tab" border="1" width="300">
    <caption>表格名称</caption>
    <thead>
        <tr>
            <th colspan="3" onclick="hideTab()">标题1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>单元格11</td>
            <td>单元格12</td>
            <td>单元格13</td>
        </tr>
        <tr>
            <td>单元格21</td>
            <td>单元格22</td>
            <td>单元格23</td>
        </tr>
        <tr>
            <td>单元格31</td>
            <td>单元格32</td>
            <td>单元格33</td>
        </tr>
    </tbody>
    <tfoot>
        <td>备注：</td>
        <td colspan="2"></td>
    </tfoot>
</table>

<script>
var isHide = false;
function hideTab() {
    var tab = document.getElementById('tab')
    var rows = tab.rows;
    var len = tab.rows.length;
    // tab.style.display='';
    for (var i = 1; i < len; i++) {
        if (isHide) {
            rows[i].style.display = '';
        } else {
            rows[i].style.display = 'none';
        }
    }
    isHide = !isHide
}
</script>

</body>
</html>