JavaScript,DOM操作表格

学习要点:

1.操作表格

DOM在操作生成HTML上,还是比较简明的。不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了。本章主要了解一下DOM操作表格和样式的一些知识。

一.操作表格

<table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTML DOM来操作它。(PS:HTML DOM提供了更加方便快捷的方式来操作HTML,有手册)。

使用DOM来创建个表格,很繁琐【不推荐】

window.onload = function() { //window.onload事件,等待html执行完成后,执行匿名函数
//使用DOM来创建这个表格
var table = document.createElement('table'); //创建table元素节点
table.border = 1; //设置table元素节点边框宽度
table.width = 300; //设置table元素节点宽度 var caption = document.createElement('caption'); //创建表格标题caption元素节点
table.appendChild(caption); //将标题caption元素节点,添加到table元素节点的子节点末尾
caption.appendChild(document.createTextNode('人员表')); //创建一个文本将它添加到标题caption元素节点里 var thead = document.createElement('thead');
table.appendChild(thead); var tr = document.createElement('tr');
thead.appendChild(tr); var th1 = document.createElement('th');
var th2 = document.createElement('th');
var th3 = document.createElement('th'); tr.appendChild(th1);
th1.appendChild(document.createTextNode('姓名'));
tr.appendChild(th2);
th2.appendChild(document.createTextNode('年龄')); document.body.appendChild(table); };

PS:使用DOM来创建表格其实已经没有什么难度,就是有点儿小烦而已。下面我们再使用HTML DOM来获取和创建这个相同的表格。

HTML DOM创建或者获取表格更清晰方便,比DOM好的多

HTML DOM中,给这些元素标签提供了一些属性和方法

属性或方法

说明

caption

保存着<caption>元素的引用

tBodies

保存着<tbody>元素的HTMLCollection集合

tFoot

保存着对<tfoot>元素的引用

tHead

保存着对<thead>元素的引用

rows

保存着对<tr> 元素的HTMLCollection集合

createTHead()

创建<thead>元素,并返回引用

createTFoot()

创建<tfoot>元素,并返回引用

createCaption()

创建<caption>元素,并返回引用

deleteTHead()

删除<thead>元素

deleteTFoot()

删除<tfoot>元素

deleteCaption()

删除<caption>元素

deleteRow(pos)

删除指定的行

insertRow(pos)

向rows集合中的指定位置插入一行

 

<tbody>元素添加的属性和方法

属性或方法

说明

rows

保存着<tbody>元素中行的HTMLCollection

deleteRow(pos)

删除指定位置的行

insertRow(pos)

向rows集合中的指定位置插入一行,并返回引用

 

<tr>元素添加的属性和方法

属性或方法

说明

cells

保存着<tr>元素中单元格的HTMLCollection

deleteCell(pos)

删除指定位置的单元格

insertCell(pos)

向cells集合的指定位置插入一个单元格,并返回引用

PS:因为表格较为繁杂,层次也多,在使用之前所学习的DOM只是来获取某个元素会非常难受,所以使用HTML DOM会清晰很多

HTML DOM获取表格

首先要通过id或者名称,获取到table节点

caption属性,获取或设置表格的<caption>标题标签
使用方式:
table节点.caption

/*
<table border="1" width="300">
<caption>人员表</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">合计:N</td>
</tr>
</tfoot>
</table>
*/
window.onload = function() { //window.onload事件,等待html执行完成后,执行匿名函数
var table = document.getElementsByTagName('table')[0]; //通过名称获取到table标签节点
alert(table.caption); //caption属性,获取表格的caption标题标签节点
//返回:[object HTMLTableCaptionElement]
alert(table.caption.innerHTML); //查看标题节点里的文本内容
//返回:人员表
table.caption.innerHTML = '标题修改了';
alert(table.caption.innerHTML); //查看标题节点里的文本内容
//返回:标题修改了 };

tHead属性,获取表格的<thead>表头标签节点
使用方式:
table节点.tHead

/*
<table border="1" width="300">
<caption>人员表</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">合计:N</td>
</tr>
</tfoot>
</table>
*/
window.onload = function() { //window.onload事件,等待html执行完成后,执行匿名函数
var table = document.getElementsByTagName('table')[0]; //通过名称获取到table标签节点
alert(table.tHead); //tHead属性,获取表格的<thead>表头标签节点
//返回:[object HTMLTableSectionElement]
};

tFoot属性,获取表格的<tfoot>表尾标签节点
使用方式:
table节点.tFoot

/*
<table border="1" width="300">
<caption>人员表</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">合计:N</td>
</tr>
</tfoot>
</table>
*/
window.onload = function() { //window.onload事件,等待html执行完成后,执行匿名函数
var table = document.getElementsByTagName('table')[0]; //通过名称获取到table标签节点
alert(table.tFoot); //tFoot属性,获取表格的<tfoot>表尾标签节点
//返回:[object HTMLTableSectionElement]
};

tBodies属性,获取表格的<tbody>表主体标签节点,因为主体可以有多个,所以tBodies属性返回的集合
使用方式:
table节点.tBodies

/*
<table border="1" width="300">
<caption>人员表</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">合计:N</td>
</tr>
</tfoot>
</table>
*/
window.onload = function() { //window.onload事件,等待html执行完成后,执行匿名函数
var table = document.getElementsByTagName('table')[0]; //通过名称获取到table标签节点
alert(table.tBodies); //tBodies属性,获取表格的<tbody>表主体标签节点,因为主体可以有多个,所以tBodies属性返回的集合
//返回:[object HTMLCollection]
alert(table.tBodies[0]); //获取第一个<tbody>标签
//返回:[object HTMLTableSectionElement]
};

PS:在一个表格中<thead>和<tfoot>是唯一的,只能有一个。而<tbody>不是唯一的可以有多个,这样导致最后返回的<thead>和<tfoot>是元素引用,而<tbody>返回的是元素集合。

rows属性,获取表格的行签节点,因为行可以有多个,所以rows属性返回的集合
使用方式:
table节点.rows

/*
<table border="1" width="300">
<caption>人员表</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">合计:N</td>
</tr>
</tfoot>
</table>
*/
window.onload = function() { //window.onload事件,等待html执行完成后,执行匿名函数
var table = document.getElementsByTagName('table')[0]; //通过名称获取到table标签节点
alert(table.rows); //rows属性,获取表格的<tr>主体里的行签节点,因为行可以有多个,所以rows属性返回的集合
//返回:[object HTMLCollection]
alert(table.rows.length); //获取<tr>标签长度
//返回:4
};

获取表格主体<tbody>的<tr>里的行签节点

/*
<table border="1" width="300">
<caption>人员表</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">合计:N</td>
</tr>
</tfoot>
</table>
*/
window.onload = function() { //window.onload事件,等待html执行完成后,执行匿名函数
var table = document.getElementsByTagName('table')[0]; //通过名称获取到table标签节点
alert(table.tBodies[0].rows); //获取表格主体第一个<tbody>的<tr>里的行签节点
//返回:[object HTMLCollection]
alert(table.tBodies[0].rows.length); //获取<tr>标签长度
//返回:2
};

cells属性,获取表格的<tr>里的<td>单元格节点,cells属性返回的集合
使用方式:
rows[0]行节点.cells

/*
<table border="1" width="300">
<caption>人员表</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">合计:N</td>
</tr>
</tfoot>
</table>
*/
window.onload = function() { //window.onload事件,等待html执行完成后,执行匿名函数
var table = document.getElementsByTagName('table')[0]; //通过名称获取到table标签节点
alert(table.tBodies[0].rows[0]); //获取第一个表格主体里的第一个<tr>标签
//返回:[object HTMLCollection]
//cells属性,获取表格的<tr>里的<td>单元格节点,cells属性返回的集合
alert(table.tBodies[0].rows[0].cells); //获取第一个表格主体<tbody>里的第一个<tr>标签里的单元格<td>
//返回;[object HTMLCollection]
alert(table.tBodies[0].rows[0].cells.length); //查看单元格<td>的长度
//返回;3
};

获取<td>单元格里的文本内容

/*
<table border="1" width="300">
<caption>人员表</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">合计:N</td>
</tr>
</tfoot>
</table>
*/
window.onload = function() { //window.onload事件,等待html执行完成后,执行匿名函数
var table = document.getElementsByTagName('table')[0]; //通过名称获取到table标签节点
alert(table.tBodies[0].rows[0]); //获取第一个表格主体里的第一个<tr>标签
//返回:[object HTMLCollection]
//cells属性,获取表格的<tr>里的<td>单元格节点,cells属性返回的集合
alert(table.tBodies[0].rows[0].cells); //获取第一个表格主体<tbody>里的第一个<tr>标签里的单元格<td>
//返回;[object HTMLCollection]
alert(table.tBodies[0].rows[0].cells[0].innerHTML); //查看第一个单元格<td>的文本内容
//返回;张三
};

按HTML DOM来删除标题、表头、表尾、行、单元格

deleteCaption()方法,删除表格的标题<caption>节点
使用方式:
table节点.deleteCaption()

/*
<table border="1" width="300">
<caption>人员表</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">合计:N</td>
</tr>
</tfoot>
</table>
*/
window.onload = function() { //window.onload事件,等待html执行完成后,执行匿名函数
var table = document.getElementsByTagName('table')[0]; //通过名称获取到table标签节点
table.deleteCaption(); //deleteCaption()方法,删除表格的标题<caption>节点
};

deleteTHead()方法,删除表格的表头<thead>节点
使用方式:
table节点.deleteTHead()

/*
<table border="1" width="300">
<caption>人员表</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">合计:N</td>
</tr>
</tfoot>
</table>
*/
window.onload = function() { //window.onload事件,等待html执行完成后,执行匿名函数
var table = document.getElementsByTagName('table')[0]; //通过名称获取到table标签节点
table.deleteTHead(); //deleteTHead()方法,删除表格的表头<thead>节点
};

deleteTFoot()方法,删除表格的表尾<tfoot>节点
使用方式:
table节点.deleteTFoot()

/*
<table border="1" width="300">
<caption>人员表</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">合计:N</td>
</tr>
</tfoot>
</table>
*/
window.onload = function() { //window.onload事件,等待html执行完成后,执行匿名函数
var table = document.getElementsByTagName('table')[0]; //通过名称获取到table标签节点
table.deleteTFoot(); //deleteTFoot()方法,删除表格的表尾<tfoot>节点
};

deleteRow()方法,删除表格的行<tr>节点,参数是要删除第几个tr标签
使用方式:
tr父节点.deleteRow(要删除第几个tr)

/*
<table border="1" width="300">
<caption>人员表</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">合计:N</td>
</tr>
</tfoot>
</table>
*/
window.onload = function() { //window.onload事件,等待html执行完成后,执行匿名函数
var table = document.getElementsByTagName('table')[0]; //通过名称获取到table标签节点
table.tBodies[0].deleteRow(0); //deleteRow()方法,删除表格的行<tr>节点
};

deleteCell()方法,删除表格的单元格<td>节点,参数是要删除第几个td标签
使用方式:
td父节点.deleteCell(要删除第几个td标签)

/*
<table border="1" width="300">
<caption>人员表</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">合计:N</td>
</tr>
</tfoot>
</table>
*/
window.onload = function() { //window.onload事件,等待html执行完成后,执行匿名函数
var table = document.getElementsByTagName('table')[0]; //通过名称获取到table标签节点
table.tBodies[0].rows[1].deleteCell(1); //deleteCell()方法,删除表格的单元格<td>节点,参数是要删除第几个td标签
};

 添加表格

 给<body>添加<table>标签

window.onload = function() { //window.onload事件,等待html执行完成后,执行匿名函数
var table = document.createElement('table'); //创建一个元素table标签节点
table.width = 300; //设置table标签宽度
table.border = 1; //table标签边框宽度
document.body.appendChild(table); //将table标签添加到body的子节点里
};

createCaption()方法,给表格<table>,添加标题标签<caption>
使用方式:
<caption>父节点.createCaption()

window.onload = function() { //window.onload事件,等待html执行完成后,执行匿名函数
var table = document.createElement('table'); //创建一个元素table标签节点
table.width = 300; //设置table标签宽度
table.border = 1; //table标签边框宽度 table.createCaption().innerHTML = '人员表'; //createCaption()方法,给表格<table>,添加标题标签<caption>
document.body.appendChild(table); //将table标签添加到body的子节点里
};

createTHead()方法,给表格<table>,添加表头标签<thead>,返回引用
使用方式:
<thead>父节点.createTHead()

window.onload = function() { //window.onload事件,等待html执行完成后,执行匿名函数
var table = document.createElement('table'); //创建一个元素table标签节点
table.width = 300; //设置table标签宽度
table.border = 1; //table标签边框宽度
document.body.appendChild(table); //将table标签添加到body的子节点里 table.createCaption().innerHTML = '人员表'; //createCaption()方法,给表格<table>,添加标题标签<caption>
var thead = table.createTHead(); //createTHead()方法,给表格<table>,添加表头标签<thead>
};

insertRow()方法,给表格添加行标签<tr>,参数添加第几行,返回引用
使用方式:
<tr>父节点.insertRow()

window.onload = function() { //window.onload事件,等待html执行完成后,执行匿名函数
var table = document.createElement('table'); //创建一个元素table标签节点
table.width = 300; //设置table标签宽度
table.border = 1; //table标签边框宽度
document.body.appendChild(table); //将table标签添加到body的子节点里 table.createCaption().innerHTML = '人员表'; //createCaption()方法,给表格<table>,添加标题标签<caption>
var thead = table.createTHead(); //createTHead()方法,给表格<table>,添加表头标签<thead>
thead.insertRow(0); //insertRow()方法,给表格添加行标签<tr>
};

insertCell()方法,给表格添加单元格标签<td>,参数创建第几个td
使用方式:
<td>父节点.insertCell()

window.onload = function() { //window.onload事件,等待html执行完成后,执行匿名函数
var table = document.createElement('table'); //创建一个元素table标签节点
table.width = 300; //设置table标签宽度
table.border = 1; //table标签边框宽度
document.body.appendChild(table); //将table标签添加到body的子节点里 table.createCaption().innerHTML = '人员表'; //createCaption()方法,给表格<table>,添加标题标签<caption>
var thead = table.createTHead(); //createTHead()方法,给表格<table>,添加表头标签<thead>
var tr = thead.insertRow(0); //insertRow()方法,给表格添加行标签<tr>
tr.insertCell(0).innerHTML = '数据1'; //insertCell()方法,给表格添加单元格标签<td>,参数创建第几个td
tr.insertCell(1).innerHTML = '数据2';
tr.insertCell(2).innerHTML = '数据3';
};

在创建表格的时候<table>、<tbody>、<th>没有特定的方法,需要使用document来创建。也可以模拟已有的方法编写特定的函数即可,例如:insertTH()之类的。

第一百一十五节,JavaScript,DOM操作表格的更多相关文章

  1. 第四百一十五节,python常用排序算法学习

    第四百一十五节,python常用排序算法学习 常用排序 名称 复杂度 说明 备注 冒泡排序Bubble Sort O(N*N) 将待排序的元素看作是竖着排列的“气泡”,较小的元素比较轻,从而要往上浮 ...

  2. 第三百一十五节,Django框架,CSRF跨站请求伪造

    第三百一十五节,Django框架,CSRF跨站请求伪造  全局CSRF 如果要启用防止CSRF跨站请求伪造,就需要在中间件开启CSRF #中间件 MIDDLEWARE = [ 'django.midd ...

  3. 第一百一十六节,JavaScript,DOM操作样式

    JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...

  4. 第一百一十四节,JavaScript文档对象,DOM进阶

    JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...

  5. 第一百一十三节,JavaScript文档对象,DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

  6. 第一百一十九节,JavaScript事件入门

    JavaScript事件入门 学习要点: 1.事件介绍 2.内联模型 3.脚本模型 4.事件处理函数 JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操 ...

  7. 第一百四十五节,JavaScript,同步动画

    JavaScript,同步动画 将上一节的,移动透明动画,修改成可以支持同步动画,也就是可以给这个动画方法多个动画任务,让它同时完成 原理: 向方法里添加一个属性,这个属性是一个对象,同步动画属性,属 ...

  8. 第一百一十八节,JavaScript,动态加载脚本和样式

    JavaScript,动态加载脚本和样式 一动态脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的JS脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. ...

  9. 第二百一十五节,jQuery EasyUI,DateBox(日期输入框)组件

    jQuery EasyUI,DateBox(日期输入框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 DateBox(日期输入框)组件的使 ...

随机推荐

  1. JAVA基础之内部类

    JAVA基础之内部类 2017-01-13 1.java中的内部类都有什么?! 成员内部类 局部内部类 匿名内部类 静态内部类 2.内部类详解 •成员内部类 在一个类的内部再创建一个类,成为内部类 1 ...

  2. 最详细win7下手动搭建PHP环境:apache2.4.23+php7.0.11

    ♣资源下载(apache24,php7,phpStorm9) ♣修改apache24配置文件 ♣安装和启动Apache服务 ♣修改php7.0.11配置文件 配置前说明:电脑需要有vc运行库环境,否则 ...

  3. javascript构造函数以及原型对象的理解

    以下是一个构造函数的例子 如果是实例方法,不同的实例化,它们引用的地址是不一样的,是唯一的. //定义一个构造函数 function People(name,age){ this.name=name; ...

  4. SR-IOV简介

    转载:http://docs.oracle.com/cd/E38902_01/html/E38873/glbzi.html SR-IOV 技术是一种基于硬件的虚拟化解决方案,可提高性能和可伸缩性.SR ...

  5. linux基础命令大全

    编辑器 ed vi/vim (交互式) sed (非交互) vi/vim 的使用 1.命令模式 移动光标 方向键 hjkl H L M G 1G nG 复制行 yy nyy 粘贴 p 删除行 dd n ...

  6. Vim扩展YouCompleteMe插件

    在Vim中安装YouCompleteMe插件 一.安装前的说明: 1.确保vim版本>=7.4,若MAC OS,建议直接安装MacVim(8.0版本). ps:如果不想使用MacVim的GUI, ...

  7. CoreJavaE10V1P3.3 第3章 Java的基本编程结构-3.3 数据类型

    3.3 数据类型 这里所说的数据类型是指 Java的8中基本数据类型,是原生就存在的. 不同进制数的字面值表示方法 进制 字面值表示方法 例子 是否默认 JDK版本支持 2进制 0b或0B前缀(每4位 ...

  8. HTML5学习之Web存储

    在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前, ...

  9. c语言对齐问题

    引言 考虑下面的结构体定义: typedef struct{ char c1; short s; char c2; int i; }T_FOO; 假设这个结构体的成员在内存中是紧凑排列的,且c1的起始 ...

  10. C++类与static

    到目前为止,我们设计的类中所有的成员变量和成员函数都是属于对象的,如我们在前面定义的book类,利用book类声明两个对象Alice和Harry,这两个对象均拥有各自的price和title成员变量, ...