js如何动态创建表格（两种⽅法）
js如何动态创建表格（两种⽅法）⼀、总结
⼀句话总结：
1、⽅法⼀：写好创建表格的html代码，将之赋值给div的innerHTML。
2、⽅法⼆、直接⽤创建好的table元素的⽅法insertRow和insertCell来实现。
3、指定⾏列创建表格：通过循环。
1、table元素的动态（js中）常⽤属性有哪些？
解答：tab.width=500; tab.border=2;。
2、如何得到某个div的第⼀个table？
解答：var ElementsByTagName('table')[0]。
3、html中元素如何移除⾃⼰？
解答：先⽗节点，然后移除⽗节点的⼦节点。veChild(ta)。
4、insertRow(i)是谁的⽅法？
解答：table的。
5、insertCell(j)是谁的属性？
解答：row的，ws[i].insertCell(j).innerHTML=i+''+j;。
6、如何访问表格中的第i⾏的第j列的元素？
解答： ws[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[] 返回包含表格中所有单元格的⼀个数组。
语法：lls[]
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/
> 1.4 TableRow 对象
TableRow 对象⽅法
deleteCell() 删除⾏中的指定的单元格
语法：tablerowObject.deleteCell(index)
insertCell() 在⼀⾏中的指定位置插⼊⼀个空的 td 元素。
tablerowObject.insertCell(index)
返回值：⼀个 TableCell 对象，表⽰新创建并被插⼊的元素。
TableRow 对象属性
vAlign 设置或返回在⾏中的数据的垂直排列⽅式。
语法：tablerowObject.vAlign=top|bottom|middle|baseline
rowIndex 返回该⾏在表中的位置。
语法：wIndex
其他：align/
> 1.5 TableCell 对象
TableCell 对象属性
abbr 设置或返回单元格中内容的缩写版本。
axis 设置或返回相关单元格的⼀个逗号分隔的列表。
cellIndex 返回单元格在某⾏的单元格集合中的位置。
colSpan 单元格横跨的列数。
rowSpan 设置或返回单元格可横跨的⾏数。
vAlign/width/
3、案例截图
4、代码
> 代码1：
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>演⽰⽂档</title>
6<style type="text/css">
7</style>
8</head>
9<body>
10<h3>动态创建表格1</h3>
11⾏数<input type="text" value="5" id="rows">
12列数<input type="text" value="5" id="cols">
13<input type="button" value="创建表格" onclick="creatTab()"> 14<div id="div1"></div>
15<script>
16function creatTab(){
17 ElementById('rows').value
18 ElementById('cols').value
19 ElementById('div1')
20// alert(rows+'\n'+cols)
21var tab='<table border=1 width=500">'
22for(var i=0;i<rows;i++){
23 tab+='<tr>'
24for(var j=0;j<cols;j++){
25 tab+="<td style='background:green'>"+i+j+"</td>"
26 }
27 tab+='</tr>'
28 }
29 tab+='</table>';
30 div1.innerHTML=tab
31 }
32</script>
33</body>
34</html>
> 代码2：
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>演⽰⽂档</title>
6<style type="text/css">
7</style>
8</head>
9<body>
10<h3>动态创建表格1</h3>
11⾏数<input type="text" value="5" id="rows">
12列数<input type="text" value="5" id="cols">
13<input type="button" value="创建表格" onclick="creatTab()">
14<div id="div1"></div>
15<script>
16function creatTab(){
17 ElementById('rows').value
18 ElementById('cols').value
19 ElementById('div1');
20var ElementsByTagName('table')[0]
21if (ta) {veChild(ta)}
22var tab = ateElement("table");
23 tab.width=500;
24 tab.border=2;
25for(var i=0;i<rows;i++){
26 tab.insertRow(i)
27for(var j=0;j<cols;j++){
28 ws[i].insertCell(j).innerHTML=i+''+j;
29 ws[i].cells[j].style.background='green'
30 }
31 }
32css怎么创建
33 ElementById("div1").appendChild(tab)
34
35 }
36</script>
37</body>
38</html>
三、测试题-简答题
1、table元素的动态（js中）常⽤属性有哪些？
解答：tab.width=500; tab.border=2;。
2、如何得到某个div的第⼀个table？
解答：var ElementsByTagName('table')[0]。
3、html中元素如何移除⾃⼰？
解答：先⽗节点，然后移除⽗节点的⼦节点。veChild(ta)。4、insertRow(i)是谁的⽅法？
解答：table的。
5、insertCell(j)是谁的属性？
解答：row的，ws[i].insertCell(j).innerHTML=i+''+j;。
6、如何访问表格中的第i⾏的第j列的元素？
解答： ws[i].cells[j].style.background='green'。
7、如何通过创建html语句的⽅式给div加表格？
解答：var tab='<table border=1 width=500">' tab+='</table>'; div1.innerHTML=tab。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论