JavaScript 动态表格操作

标签：rows 表格单元格 tab var 动态 JavaScript 解答

阅读目录

JavaScript 动态创建表格
表格相关的属性和方法
JavaScript 实现点击显示和隐藏表格
- 技术解答
JavaScript 实现动态克隆一个表格
- 技术解答
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>

第二种示例

JavaScript 动态表格操作_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）表格中的数据

JavaScript 动态表格操作_其他_02

<!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可以轻松实现表格内容的复制

表格的属性需要单独的复制
JavaScript 动态表格操作_html_03

用到的 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属性，遍历每一行中的单元格。
遍历的过程中，动态的为每一个单元格定义单击事件，改变单元格的背景色。

JavaScript 动态表格操作_其他_04

<!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>
        </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 type="text/javascript">
/*
    var tab=document.getElementById('tab') //获取表格元素
    var rows=tab.rows; //返回包含表格中所有行的一个数组。
    var rlen=rows.length;
    alert(rlen)
    //var cells=tab.cells;
    //var clen=cells.length //这种写法会出错
    cells=rows[1].cells //某一行的单元格
    alert(cells.length)
*/

function tabCell() {
    var tab = document.getElementById('tab')
    var rows = tab.rows;
    var rlen = rows.length;
    for (var i = 1; i < rlen; i++) { //遍历所有行
        var cells = rows[i].cells; //得到这一行的所有单元格
        for (var j = 0; j < cells.length; j++) {
            //给每一个单元格添加click事件
            cells[j].onclick = function () {
                if (this.style.background == '') {
                    this.style.background = randomHexColor();
                } else {
                    this.style.background = ''
                }
            }

        }
    }
}

tabCell()

// 随机生成十六进制颜色
function randomHexColor() {
    //随机生成十六进制颜色 
    var hex = Math.floor(Math.random() * 16777216).toString(16);
    //生成ffffff以内16进制数 
    while (hex.length < 6) {
        //while循环判断hex位数，少于6位前面加0凑够6位
        hex = '0' + hex;
    }
    return '#' + hex; //返回‘#'开头16进制颜色
}
</script>

</body>
</html>

技术解答

1、如何动态给元素添加点击事件？
解答：cells[j].onclick=function(){函数体}。

2、如何动态的获取元素的背景属性？
解答：if (this.style.background=='')。

3、table表格的行（rows）属性和列属性（或者说单元格属性cells）的关系？
解答：
行包含单元格（cells 是 rows 的属性）。
var cells=rows[i].cells; //得到这一行的所有单元格。

4、如何动态的获取元素？
解答：var tab=document.getElementById('tab')。

5、如何动态从表格中取到某个单元格的 dom 对象？
解答：
通过table的rows属性，遍历表格所有行，然后通过cells属性，找到我们需要的单元格。

6、如何判断js中某个标签是否设置了背景色属性？
解答：
获取标签对应的 dom 对象，然后判断 dom 对象的 style 的 background 属性是否为空字符串。

if (this.style.background=='')

标签：rows,表格,单元格,tab,var,动态,JavaScript,解答
From： https://blog.51cto.com/u_13571520/6046073

阅读目录

第一种示例

第二种示例

示例解析

1.1 Table 对象集合

1.2 Table 对象方法

1.3 Table 对象常用属性

1.4 TableRow 对象

TableRow 对象方法

TableRow 对象属性

1.5 TableCell 对象

TableCell 对象属性

技术解答

技术解答

技术解答

相关文章

赞助商

阅读排行