JavaScript 动态表格操作
Posted 知其黑、受其白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 动态表格操作相关的知识，希望对你有一定的参考价值。
阅读目录
javascript 动态创建表格
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>
技术解答
1、表格的行中如何合并表格的列？
解答：用 colspan 属性即可，比如合并三个单元格：colspan="3"
2、js 中 bool 类型的变量如何取反？
解答：把非自己赋给自己。isHide=!isHide
3、表格中的 rows 属性是元素（element）么？
解答：是，比如 rows[i].style.display='';
4、如何将一个元素的内容隐藏？
解答：将 display 属性设置为 none
5、如何一个通过 display 属性隐藏的元素显示？
解答：
将 display 的属性 none 去掉，可以通过赋空值去掉它 rows[i].style.display='';
6、html 中 display 是样式么？
解答：是的，例如：rows[i].style.display='none';
JavaScript 实现动态克隆一个表格
实例描述：实现表格及其内容的复制
案例要点：通过 innerHTML可以轻松实现表格内容的复制
表格的属性需要单独的复制
用到的 table 标签的属性
caption 对表格的 caption 元素的引用。
border/width/id…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>8.4 演示文档</title>
<style type="text/css">
</style>
</head>
<body>
<table id="tab" border="1">
<caption>表格名称</caption>
<thead>
<tr>
<th colspan="3">标题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>
<input type="button" value="复制表格" onclick="copytab()">
<script>
function copytab()
var tab = document.getElementById('tab');
var cotab = document.createElement('table')
cotab.innerHTML = tab.innerHTML;
cotab.border = tab.border;
cotab.style.marginTop = '20px';
cotab.caption.innerHTML = '我是复制的'
document.body.appendChild(cotab)
</script>
</body>
</html>
技术解答
1、如何动态创建一个表格？
解答：通过document的createElement方法，然后然后将创建好的这个dom表格对象加到document的body属性中。
2、如何通过document的createElement方法创建一个表格的dom对象，createElement方法的参数是什么？
解答：var cotab=document.createElement('table') 参数是 'table'
3、appendChild 的作用是什么？
解答：append 是附加贴上的意思，appendChild 就是给某个元素贴上孩子的意思。
4、为什么需要 appendChild 方法？
解答：document 的 createElement 方法创建出来的dom标签对象，如果不append到实体dom标签，那样根本就没加到dom树种，那样创建dom没有意义。
5、如何动态实现表格内容的复制？
解答：通过dom表格的innerHTML属性，cotab.innerHTML=tab.innerHTML;
6、document的createElement方法的返回值是什么？
解答：createElement方法的返回值是创建出来的 dom 标签对象。
7、如何动态实现表格边框的复制？
解答：通过dom表格标签的border属性。 cotab.border=tab.border;
8、如何动态实现表格样式的复制？
解答：通过dom表格标签的style属性。
9、table标签的常见属性有哪些？
解答：边框border，标题caption等等
10、如何动态修改表格的标题？
解答：通过表格dom对象的caption属性的innerHTML属性。
JavaScript 实现动态点击改变单元格颜色
1、通过 table 的 rows 属性，遍历表格所有行，然后通过 cells 属性，遍历每一行中的单元格。
2、遍历的过程中，动态的为每一个单元格定义单击事件，改变单元格的背景色。
实例描述：单击单元格后改变其背景颜色,再次单击则恢复之前样式
案例要点：
通过table的rows属性，遍历表格所有行，然后通过cells属性，遍历每一行中的单元格。
遍历的过程中，动态的为每一个单元格定义单击事件，改变单元格的背景色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格专题</title>
</head>
<body>
<table id="tab" border="1">
<caption>表格名称</caption>
<thead>
<tr>
<th colspan="3">标题1</th>以上是关于JavaScript 动态表格操作的主要内容，如果未能解决你的问题，请参考以下文章