Word2021中快速制作三线表，提高数据可读性！

三线表有3条线：顶线、底线和栏目线，这三条线都是横线，表格中没有任何竖线，其形式简洁、功能分明、阅读方便，多用于论文中，最大优点就是提高了数据的可读性，下面给大家分享快速制作三线表的方法；

规矩先看效果图

先来看左图的地区列表是如何实现的。

我们在解析数据之前，要先看下数据结构

[{
 "_id": "XL28U3kPDdDCJ9m0",
 "item": {
 "diqu": "北京",
 "list": [{
 "id": "XL27oeSiwXKAQuFR",
 "name": "清华大学",
 "img": "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2693386884,1727296839\u0026fm=58\u0026bpow=1200\u0026bpoh=1200"
 }, {
 "id": "XL27oeSiwXKAQuF1",
 "name": "北京大学",
 "img": "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2152123166,2178049351\u0026fm=58\u0026bpow=1080\u0026bpoh=1080"
 }, {
 "id": "XL27oeSiwXKAQuF2",
 "name": "人民大学",
 "img": "https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2642337058,1598432384\u0026fm=58\u0026w=121\u0026h=140\u0026img.PNG"
 }]
 }
}, {
 "_id": "XL28U3kPDdDCJ9m1",
 "item": {
 "diqu": "杭州",
 "list": [{
 "id": "XL27oeSiwXKAQuF3",
 "name": "杭州师范大学",
 "img": "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2219745018,1861674512\u0026fm=58\u0026bpow=475\u0026bpoh=475"
 }, {
 "id": "XL27oeSiwXKAQuF4",
 "name": "浙江大学",
 "img": "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3694367183,2414886214\u0026fm=58\u0026bpow=995\u0026bpoh=995"
 }]
 }
}]

这里有两条数据，一个是北京地区的，一个是杭州地区的，正好对应我们图上的地区。然后每条json数据里面包含一个学校list，比如北京地区有清华大学，北京大学，人民大学。而每个大学对象里又包含学校id，学校名，学校校徽。

有了上面的源数据，接下来我们就看具体的实现

首先是wxml文件,其实很简单，就是一个大的列表用来显示地区，大列表里面又有一个小的列表用来显示学校。

<!--index.wxml-->
<!-- 列表 -->
<block wx:for="{{dataList}}" wx:key="item">
 <view class='item-root'>
 <text class='title'>{{item.item.diqu}}</text>
 <block wx:for="{{item.item.list}}" wx:key="item">
 <view class='img-root' bindtap='goDetail' data-item='{{item}}'>
 <image class='img' src='{{item.img}}'></image>
 <text class='xuexiao'>{{item.name}}</text>
 </view>
 </block>
 </view>
</block>

然后是wxss文件

/* pages/myorder/myorder.wxss */
page {
 background: #fff;
}
.item-root {
 display: flex;
 flex-direction: column;
}
.title {
 width: 100%;
 background: gainsboro;
}
.img-root {
 display: flex;
 margin-left: 15px;
 margin-top: 5px;
 border-bottom: solid 1px gainsboro;
}
.img {
 width: 30px;
 height: 30px;
}
.xuexiao {
 margin: 5px 10px;
 flex: 1;
}

至于如何把源数据json解析并显示到列表中，可以参考我之前写的解析本地json到列表。

《列表功能实现和本地json数据解析》：

https://www.kancloud.cn/java-qiushi/xiaochengxu/767304

解析本地json到列表

视频讲解：

https://edu.csdn.net/course/play/9531/202161

到这里我们的地区列表就轻松的实现了，再来看下时间轴列表的实现

小程序时间轴列表实现

还是先看数据源,我们拿清华大学为例

{

"_id": "XL27oeSiwXKAQuFR",

"name": "清华大学",

"desc": "清华大学始建与1900年，位于北京",

"img": "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2693386884,1727296839\u0026fm=58\u0026bpow=1200\u0026bpoh=1200",

"wangzhi": "http://www.tsinghua.edu.cn",

"diqu": "北京市海淀区",

"newsList": [{

"time": "2019年4月1日",

"content": "招聘职位：英语老师，数学老师，物理老师",

"title": "逸夫楼3楼大厅北京新东方专场招聘会"

}, {

"time": "2019年3月25日",

"title": "北京京东专场招聘",

"content": "招聘岗位：管培生，总裁助理，总经理"

}]

}

可以看到我们是顶部的学校信息，和底部的newsList组成，newsList就是我们时间轴的具体数据源。下面我们就来看看实现代码。

wxml文件如下,注释里写的很清楚了

<view class='top-root'>
 <view class='img-root'>
 <image class='img' src='{{deatil.img}}'></image>
 </view>
 <view class='top-desc-root'>
 <text class='xiangqing'>{{deatil.name}}</text>
 <text class='xiangqing'>网址：{{deatil.wangzhi}}</text>
 <text class='xiangqing'>地区：{{deatil.diqu}}</text>
 </view>
</view>
<!-- 时间轴 -->
<view class="listview-container">
 <block wx:for="{{newsList}}" wx:key="item">
 <view class="playlog-item" bindtap="itemTapped">
 <view class="dotline">
 <!-- 竖线 -->
 <view class="line"></view>
 <!-- 圆点 -->
 <view class="dot"></view>
 <!-- 时间戳 -->
 </view>
 <view class="content">
 <text class="course">{{item.time}}</text>
 <text class="course">{{item.title}}</text>
 <text class="chapter">{{item.content}}</text>
 </view>
 </view>
 <ad unit-id="adunit-5abb45645905fc90" wx:if="{{index % 5==4}}"></ad>
 </block>
</view>

wxss样式文件如下

page {
 background: #fff;
}
.top-root {
 display: flex;
 flex-wrap: nowrap;
 flex-direction: row;
}
.img-root {
 height: 40px;
 width: 40px;
 margin: 5px;
}
.img {
 width: 100%;
 height: 100%;
}
.top-desc-root {
 flex: 1;
 display: flex;
 flex-direction: column;
}
.xiangqing {
 font-size: 28rpx;
 color: #000;
}
/*时间轴*/
/*外部容器*/
.listview-container {
 margin: 10rpx 10rpx;
}
/*行样式*/
.playlog-item {
 display: flex;
}
/*时间轴*/
.playlog-item .dotline {
 width: 35px;
 position: relative;
}
/*竖线*/
.playlog-item .dotline .line {
 width: 1px;
 height: 100%;
 background: #ccc;
 position: absolute;
 top: 0;
 left: 15px; 
}
/*圆点*/
.playlog-item .dotline .dot {
 width: 11px;
 height: 11px; 
 background: #30ac63;
 position: absolute; 
 top: 10px; 
 left: 10px; 
 border-radius: 50%; 
}
/*时间戳*/
.playlog-item .dotline .time {
 width: 100%;
 position: absolute;
 margin-top: 30px;
 z-index: 99;
 font-size: 12px;
 color: #777;
 text-align: center;
}
/*右侧主体内容*/
.playlog-item .content {
 width: 100%;
 display: flex;
 flex-direction: column;
 border-bottom: 1px solid #ddd;
 margin: 3px 0;
}
/*章节部分*/
.playlog-item .content .chapter {
 font-size: 30rpx;
 line-height: 68rpx;
 color: #444;
 white-space: normal;
 padding-right: 10px;
}
/*课程部分*/
.playlog-item .content .course {
 font-size: 28rpx;
 line-height: 56rpx;
 color: #999;
}

到这里时间的样式就已经实现了，我们接下来要做的就是把数据源json数据解析到页面上。方式有如下三种

1，把json放本地
2，把json导入到云开发数据
3，把json放到我们自己的服务器后台
下面我简单已放在云开发数据库并请求解析为例

先看下我云开发后台数据库

然后写个云函数去获取云开发数据库里的json数据源，就是上图红色框里的数据

可以看到我们成功的请求到了云数据库里的数据到本地。并成功解析并渲染到页面上了。是不是很简单。

当然，实现这些你还需要有一定的云开发知识。

同样为大家提供了云开发视频讲解：https://edu.csdn.net/course/detail/9604

有任何关于编程的问题都可以私信我，我看到后会及时解答。

编程小石头，码农一枚，非著名全栈开发人员。分享自己的一些经验，学习心得，希望后来人少走弯路，少填坑。
编程小石头，为分享干货而生！据说，每个年轻上进，颜值又高的互联网人都关注了编程小石头。

avaScript 对象

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...

此外，JavaScript 允许自定义对象。

所有事物都是对象

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。对象只是带有属性和方法的特殊数据类型。

布尔型可以是一个对象。
数字型可以是一个对象。
字符串也可以是一个对象
日期是一个对象
数学和正则表达式也是对象
数组是一个对象
甚至函数也可以是对象

JavaScript 对象

对象只是一种特殊的数据。对象拥有属性和方法。

访问对象的属性

属性是与对象相关的值。

访问对象属性的语法是：

objectName.propertyName

这个例子使用了 String 对象的 length 属性来获得字符串的长度：

var message="Hello World!";

var x=message.length;

在以上代码执行后，x 的值将是：

访问对象的方法

方法是能够在对象上执行的动作。

您可以通过以下语法来调用方法：

objectName.methodName()

这个例子使用了 String 对象的 toUpperCase() 方法来将文本转换为大写：

var message="Hello world!";

var x=message.toUpperCase();

在以上代码执行后，x 的值将是：

HELLO WORLD!

创建 JavaScript 对象

通过 JavaScript，您能够定义并创建自己的对象。

创建新对象有两种不同的方法：

定义并创建对象的实例
使用函数来定义对象，然后创建新的对象实例

创建直接的实例

这个例子创建了对象的一个新实例，并向其添加了四个属性：

实例

person=new Object();

person.firstname="John";

person.lastname="Doe";

person.age=50;

person.eyecolor="blue";

尝试一下 ?

替代语法（使用对象 literals）：

实例

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

尝试一下 ?

使用对象构造器

本例使用函数来构造对象：

实例

function person(firstname,lastname,age,eyecolor)

{

this.firstname=firstname;

this.lastname=lastname;

this.age=age;

this.eyecolor=eyecolor;

}

尝试一下 ?

在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时）

创建 JavaScript 对象实例

一旦您有了对象构造器，就可以创建新的对象实例，就像这样：

var myFather=new person("John","Doe",50,"blue");

var myMother=new person("Sally","Rally",48,"green");

把属性添加到 JavaScript 对象

您可以通过为对象赋值，向已有对象添加新属性：

假设 personObj 已存在 - 您可以为其添加这些新属性：firstname、lastname、age 以及 eyecolor：

person.firstname="John";

person.lastname="Doe";

person.age=30;

person.eyecolor="blue";

x=person.firstname;

T在以上代码执行后，x 的值将是：

John

把方法添加到 JavaScript 对象

方法只不过是附加在对象上的函数。

在构造器函数内部定义对象的方法：

function person(firstname,lastname,age,eyecolor)
{
 this.firstname=firstname;
 this.lastname=lastname;
 this.age=age;
 this.eyecolor=eyecolor;
 this.changeName=changeName;
 function changeName(name)
 {
 this.lastname=name;
 }
}

changeName() 函数 name 的值赋给 person 的 lastname 属性。

现在您可以试一下：

myMother.changeName("Doe");

尝试一下 ?

JavaScript 类

JavaScript 是面向对象的语言，但 JavaScript 不使用类。

在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。

JavaScript 基于 prototype，而不是基于类的。

JavaScript for...in 循环

JavaScript for...in 语句循环遍历对象的属性。

语法

for (variable in object)
{
 执行的代码……
}

注意： for...in 循环中的代码块将针对每个属性执行一次。

实例

循环遍历对象的属性：

实例

var person={fname:"John",lname:"Doe",age:25};

for (x in person)

{

txt=txt + person[x];

}

JavaScript Number 对象

JavaScript 只有一种数字类型。

可以使用也可以不使用小数点来书写数字。

JavaScript 数字

JavaScript 数字可以使用也可以不使用小数点来书写：

实例

var pi=3.14; // 使用小数点

var x=34; // 不使用小数点

极大或极小的数字可通过科学（指数）计数法来写：

实例

var y=123e5; // 12300000

var z=123e-5; // 0.00123

所有 JavaScript 数字均为 64 位

JavaScript 不是类型语言。与许多其他编程语言不同，JavaScript 不定义不同类型的数字，比如整数、短、长、浮点等等。

在JavaScript中，数字不分为整数类型和浮点型类型，所有的数字都是由浮点型类型。JavaScript采用IEEE754标准定义的64位浮点格式表示数字，它能表示最大值为±1.7976931348623157 x 10308，最小值为±5 x 10 -324

值 (aka Fraction/Mantissa)	指数	Sign
52 bits (0 - 51)	11 bits (50 - 62)	1 bit (63)

精度

整数（不使用小数点或指数计数法）最多为 15 位。

实例

varx=999999999999999; // x 为 999999999999999vary=9999999999999999; // y 为 10000000000000000

尝试一下 ?

小数的最大位数是 17，但是浮点运算并不总是 100% 准确：

实例

var x=0.2+0.1; // 输出结果为 0.30000000000000004

尝试一下 ?

八进制和十六进制

如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。

实例

var y=0377;

var z=0xFF;

尝试一下 ?

	绝不要在数字前面写零，除非您需要进行八进制转换。

默认情况下，JavaScript 数字为十进制显示。

但是你可以使用 toString() 方法输出16进制、8进制、2进制。

实例

var myNumber=128;

myNumber.toString(16); // 返回 80

myNumber.toString(8); // 返回 200

myNumber.toString(2); // 返回 10000000

无穷大（Infinity）

当数字运算结果超过了JavaScript所能表示的数字上限（溢出），结果为一个特殊的无穷大（infinity）值，在JavaScript中以Infinity表示。同样地，当负数的值超过了JavaScript所能表示的负数范围，结果为负无穷大，在JavaScript中以-Infinity表示。无穷大值的行为特性和我们所期望的是一致的：基于它们的加、减、乘和除运算结果还是无穷大（当然还保留它们的正负号）。

实例

myNumber=2;

while (myNumber!=Infinity)

{

myNumber=myNumber*myNumber; // 重复计算直到 myNumber 等于 Infinity

}

除以0也产生了无限:

实例

var x=2/0;

var y=-2/0;

NaN - 非数字值

NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。

你可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。

实例

var x=1000 / "Apple";

isNaN(x); // 返回 true

var y=100 / "1000";

isNaN(y); // 返回 false

除以0是无穷大，无穷大是一个数字:

实例

var x=1000 / 0;

isNaN(x); // 返回 false

数字可以是数字或者对象

数字可以私有数据进行初始化，就像 x=123;

JavaScript 数字对象初始化数据， var y=new Number(123);

实例

var x=123;

var y=new Number(123);

typeof(x) // 返回 Number

typeof(y) // 返回 Object

实例

var x=123;

var y=new Number(123);

(x===y) // 为 false，因为 x 是一个数字，y 是一个对象

数字属性

MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
POSITIVE_INFINITY
NaN
prototype
constructor

数字方法

toExponential()
toFixed()
toPrecision()
toString()
valueOf()

JavaScript 字符串（String）对象

String 对象用于处理已有的字符块。

JavaScript 字符串

一个字符串用于存储一系列字符就像 "John Doe".

一个字符串可以使用单引号或双引号：

实例

var carname="Volvo XC60";

var carname='Volvo XC60';

你使用位置（索引）可以访问字符串中任何的字符：

实例

var character=carname[7];

字符串的索引从零开始, 所以字符串第一字符为 [0],第二个字符为 [1], 等等。

你可以在字符串中使用引号，如下实例：

实例

var answer="It's alright";

var answer="He is called 'Johnny'";

var answer='He is called "Johnny"';

或者你可以在字符串中使用转义字符(\)使用引号：

实例

var answer='It\'s alright';

var answer="He is called \"Johnny\"";

尝试一下 ?

字符串（String）

字符串（String）使用长度属性length来计算字符串的长度：

实例

var txt="Hello World!";

document.write(txt.length);

var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";

document.write(txt.length);

尝试一下 ?

在字符串中查找字符串

字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置：

实例

var str="Hello world, welcome to the universe.";

var n=str.indexOf("welcome");

尝试一下 ?

如果没找到对应的字符函数返回-1

lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置。

内容匹配

match()函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。

实例

var str="Hello world!";

document.write(str.match("world") + "<br>");

document.write(str.match("World") + "<br>");

document.write(str.match("world!"));

尝试一下 ?

替换内容

replace() 方法在字符串中用某些字符替换另一些字符。

实例

str="Please visit Microsoft!"

var n=str.replace("Microsoft","w3cschool");

尝试一下 ?

字符串大小写转换

字符串大小写转换使用函数 toUpperCase() / toLowerCase():

实例

var txt="Hello World!"; // String

var txt1=txt.toUpperCase(); // txt1 文本会转换为大写

var txt2=txt.toLowerCase(); // txt2 文本会转换为小写

尝试一下 ?

字符串转为数组

字符串使用split()函数转为数组:

实例

txt="a,b,c,d,e" // String

txt.split(","); // 使用逗号分隔

txt.split(" "); // 使用空格分隔

txt.split("|"); // 使用竖线分隔

尝试一下 ?

特殊字符

Javascript 中可以使用反斜线（\）插入特殊符号，如：撇号,引号等其他特殊符号。

查看如下 JavaScript 代码:

var txt="We are the so-called "Vikings" from the north.";

document.write(txt);

在JavaScript中，字符串的开始和停止使用单引号或双引号。这意味着，上面的字符串将被切成： We are the so-called

解决以上的问题可以使用反斜线来转义引号：

var txt="We are the so-called \"Vikings\" from the north.";

document.write(txt);

JavaScript将输出正确的文本字符串：We are the so-called "Vikings" from the north.

下表列出其他特殊字符，可以使用反斜线转义特殊字符：

代码	输出
\'	单引号
\"	双引号
\	斜杆
\n	换行
\r	回车
\t	tab
\b	空格
\f	换页

字符串属性和方法

属性:

length
prototype
constructor

方法:

charAt()
charCodeAt()
concat()
fromCharCode()
indexOf()
lastIndexOf()
match()
replace()
search()
slice()
split()
substr()
substring()
toLowerCase()
toUpperCase()
valueOf()

JavaScript Date（日期）对象

日期对象用于处理日期和时间。

在线实例

如何使用 Date() 方法获得当日的日期。

使用 getFullYear() 获取年份。

getTime()

getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。

setFullYear()

如何使用 setFullYear() 设置具体的日期。

toUTCString()

如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。

getDay()

如何使用 getDay() 和数组来显示星期，而不仅仅是数字。

Display a clock

如何在网页上显示一个钟表。

完整的 Date 对象参考手册

我们提供 JavaScript Date 对象参考手册，其中包括所有可用于日期对象的属性和方法。JavaScript Date 对象参考手册。

该手册包含了对每个属性和方法的详细描述以及相关实例。

创建日期

Date 对象用于处理日期和时间。

可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象：

有四种方式初始化日期:

new Date() // 当前日期和时间

new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数

new Date(dateString)

new Date(year, month, day, hours, minutes, seconds, milliseconds)

上面的参数大多数都是可选的，在不指定的情况下，默认参数是0。

<p从 1970="" 年="" 1="" 月="" 日通用一天计算为86,400,000毫秒<="" p="" style="color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, sans-serif; font-size: 12px; white-space: normal;">

实例化一个日期的一些例子：

var today=new Date()

var d1=new Date("October 13, 1975 11:13:00")

var d2=new Date(79,5,24)

var d3=new Date(79,5,24,11,33,0)

设置日期

通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。

在下面的例子中，我们为日期对象设置了一个特定的日期 (2010 年 1 月 14 日)：

var myDate=new Date();

myDate.setFullYear(2010,0,14);

在下面的例子中，我们将日期对象设置为 5 天后的日期：

var myDate=new Date();

myDate.setDate(myDate.getDate()+5);

注意: 如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。

两个日期比较

日期对象也可用于比较两个日期。

下面的代码将当前日期与 2100 年 1 月 14 日做了比较：

在线咨询

上一篇：天天上网的你，了解URL的发展史吗？
下一篇：Vue字符换行

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Word2021中快速制作三线表，提高数据可读性！

有任何关于编程的问题都可以私信我，我看到后会及时解答。

avaScript 对象

JavaScript Number 对象

JavaScript 字符串（String） 对象

JavaScript Date（日期） 对象

您的项目需求

JavaScript 字符串（String）对象

JavaScript Date（日期）对象