原生JS实现表格排序
最近在学习js的表格排序，没想到看不起眼的表格排序实际上却暗含了众多JS知识点。在这里记录一下此次学习过程。希望对大家也有所帮助。
完整的表格排序涉及了下列这些知识点：
call方法使用
sort方法深入
数据绑定
DOM映射
下面详细的总结一下这些知识点，最后结合这些知识点实现下面这样一个表格排序案例。
完整的案例源码：https://github.com/daweihe/JS...
一、知识点总结
1、call方法使用
call方法的作用是改变方法中的this指向。
call这个方法是定义在Function.prototype的方法。我们定义的任何一个函数都可以认为它是Function这个类的一个实例。那么就可以通过实例的__proto__属性找到所属类的原型。任何一个函数都可以调用call和apply等方法。
先来看一个例子：
var obj = {
name : 'JS'
}
function testCall () {
console.log(this);
}
testCall.call( obj ); // {name: "JS"}首先函数testCall通过原型链查找机制找到call方法执行，call方法在执行过程中把调用call方法这个函数实例中的this都改变成call的第一个参数，接下来调用call方法的这个实例函数执行。
看两个题目：
function fn1() {
console.log(1);
console.log(this);
}
function fn2() {
console.log(2);
console.log(this);
}
fn1.call(fn2); //this -> fn2
fn1.call.call(fn2); //这里的call是改变function.__proto__.call的call方法中的this，相当于执行参数call方法在执行的时候，call方法的第一个参数是用来改变this的，而从第二个参数开始都是传给调用call的函数的参数。
在非严格模式下，给call方法不传递参数、或者传递null、undefined后，this都是指向window。
sum.call(); //window sum.call(null); //window sum.call(undefined); //window
严格模式下call执行的时候和非严格模式不同：
sum.call(); //undefined sum.call(null); //null sum.call(undefined); //undefined
下面使用call方法实现一个类数组转换为数组的方法：
function listToArray (likeAry) {
var ary = [];
try {
ary = Array.prototype.slice.call(likeAry);
} catch (e) {
for (var i = 0; i < likeAry.length; i ++) {
ary[ary.length] = likeAry[i];
}
}
return ary;
}和call类似的方法还有apply和bind方法，这里简单总结一下。
apply方法的作用和call方法一模一样，只是传参的形式不太一样，apply将函数的参数用数组包裹起来：
function sum(num1, num2) {
console.log(num2 + num1);
console.log(this);
}
sum.apply(null,[100,200]);bind方法同样也是用来改变this关键字的，但是它只是仅仅改变this指向，不立即执行调用this的函数。
function sum(num1, num2) {
console.log(num2 + num1);
console.log(this);
}
var obj = {name : 'zx'}
var temp = sum.bind(obj); //temp已经是被改变了this的函数
temp(100,200); //当我们需要的时候才执行
//或者像这样处理
var temp = sum.bind(null, 100, 200);
temp();bind方法体现了js中的预处理思想。
2、 sort排序深入
我们知道数组的sort方法只能排序10以内的数组。如果需要排序的数组中存在大于10的数字，我们就需要向sort方法中传入回调函数，常见的是这样：
ary.sort(function (a,b) {
return a - b;
});这样就能实现数组的升序排序。那么这样排序的原理到底是什么呢？
对于传入的两个参数：a代表的是找到的数组中的当前项，b代表的是当前项的后一项。
return a -b： 如果a大于b，返回结果，a与b交换位置。如果a小于b，那么a和b位置不变。 这是升序排序return b -a： 如果b大于a，返回结果，a与b交换位置。如果a小于b，那么a和b位置不变。 这是降序排序
了解了基本原理后，对于这样一个二维数组，如何实现按年龄排序？
var persons = [{
name:'dawei',
age:55
},{
name:'ahung',
age:3
},{
name:'maomi',
age:2
},{
name:'heizi',
age:78
},{
name:'afu',
age:32
}];其实很简单：
ary.sort(function(a,b){
return a.age - b.age;
});如果按姓名排序，则要涉及字符串的localeCompare()方法：
ary.sort(function(a,b){
return a.name.localeCompare(b.name);
});name.localeCompare()这个方法会根据两个字符串的字母进行比较，如果前一个字符串的第一个字母在24个英文字母中出现的位置比后一个字符串的第一个字符出现的位置靠前，则认定第一个字符串小，返回-1。如果出现的位置靠后，则认定第一个字符串大，返回1。如果所比较的字符相等。则比较下一个字符。
这个方法很实用，常用于按姓氏排序，对于汉字，该方法会自动将汉字转换为汉语拼音进行比较。
3、数据绑定
在js中一般使用动态绑定或者拼接字符串的方式实现数据绑定。
动态绑定：
//ary为需要添加到页面中的数据数组
var op = document.getElementById("box");//获取容器
var myUl = op.getElementsByTagName("ul")[0];//获取列表
var arrLength = ary.length;
for (var i = 0;i < arrLength ; i ++)
{ //动态创建元素
var oli = document.createElement("li");
oli.innerHTML = '<span>' + (i + 5) + '</span>' + ary[i].title;
myUl.appendChild(oli);//动态添加元素
}每添加一次就会引起一次DOM回流，如果数据量过大，这样则会严重影响性能。
关于DOM的回流与重绘，推荐大家看一下这篇文章：http://www.css88.com/archives...
拼接字符串：
var str = "";
for(var i=0; i<ary.length; i++){
str += '<li>';
str += '<span>';
str += (i+5);
str += '</span>';
str += ary[i].title;
str += '</li>';
}
myUl.innerHTML += str;这种方式虽然只引起一次回流，但是它会去除原来存在的元素中所有的事件和属性。如果我们为列表中的li标签添加鼠标移入，背景变色的事件，那么这种方法会使这个事件失效。
为了解决上面的两种数据绑定方法带来的问题，我们使用文档碎片来添加数据。
var frg = document.createDocumentFragment();//创建文档碎片
for (var i =0; i <ary.length ;i ++ ){
var li = document.createElement("li");
li.innerHTML = '<span>' + ( i + 5 ) + '</span>' + ary[i].title;
frg.appendChild(li);//将数据动态添加至文档碎片中
}
myUl.appendChild(frg); //将数据一次性添加到页面中
frg = null; //释放内存这样即只引起一次DOM回流，又会保留原来存在的事件。
4、DOM映射
DOM映射机制：所谓映射，就是指两个元素集之间元素相互“对应”的关系。页面中的标签集合和在JS中获取到的元素对象（元素集合）就是这样的关系。如果页面中的HTML标签结构发送变化，那么集合中对应的内容也会跟着自动改变。
<ul id="myul"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
对于这样一个列表使用下列脚本：
var myul = document.getElementById("myul");
var mylis = myul.getElementsByTagName('li');
for (var i = mylis.length - 1 ; i >= 0; i --) {
myul.appendChild(mylis[i]);
}
console.log(mylis.length); // 5将获取到的列表元素反序重新插入ul中，那么ul列表会变成下面这样：
<ul id="myul"> <li>5</li> <li>4</li> <li>3</li> <li>2</li> <li>1</li> </ul>
我们看到列表的长度依然是5，只是位置颠倒了。这是因为每个li标签和JS中获取的标签对象存在一个对应关系，当某个标签被重新插入到页面中时，页面中对应的标签会移动到插入的位置。这就是DOM映射。
二、实现表格排序
1、使用ajax获取数据
之所以使用动态获取数据，是为了使用文档碎片绑定数据。
var res = ''; //声明一个全局变量，接收数据
var xhr = new XMLHttpRequest();
xhr.open('get', 'date.txt', false);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
res = JSON.parse(xhr.responseText);
}
}
xhr.send(null);此时数据就保存在了res这个全局变量之中。
2、使用文档碎片绑定数据
var frg = document.createDocumentFragment();
for (let i = 0; i < res.length; i++) {
var tr = document.createElement("tr");
for (key in res[i]) {
var td = document.createElement("td");
td.innerHTML = res[i][key];
tr.appendChild(td);
}
frg.appendChild(tr);
}
tbody.appendChild(frg);3、对表格进行排序
这里涉及的点较多
//为两列添加点击事件
for (let i = 0; i < ths.length; i++) {
let curTh = ths[i];
curTh.sortFlag = -1; //用于对列进行升降序排列
curTh.index = i; //记录当前点击列的索引，便于排序操作
if (curTh.className == 'sort') {
curTh.onclick = function() {
sort.call(this); //改变排序函数内this的指向，让其指向当前点击列
}
}
}
//排序方法
function sort() {
//对数组元素进行排序
let target = this; //这里将this取出，因为在sort方法里需要使用该this，但是sort方法里的this是调用方法的数组
this.sortFlag *= -1; //1 代表升序 -1代表降序
let ary = listToArray(bodyTrs); //获取body数据
ary = ary.sort(function(a, b) {
let one = a.cells[target.index].innerHTML;
let two = b.cells[target.index].innerHTML;
let oneNum = parseFloat(one);
let twoNum = parseFloat(two);
if (isNaN(oneNum) || isNaN(two)) {
return one.localeCompare(two) * target.sortFlag;
} else {
return (oneNum - twoNum) * target.sortFlag;
}
});
//把排好序的数组重新写入页面
let frg = document.createDocumentFragment();
for (let i = 0; i < ary.length; i++) {
rg.appendChild(ary[i]);
}
tbody.appendChild(frg);
frg = null;
//点击某列时，要将其他列的排序标志恢复为-1，让下次再点击任意一个标签时都是默认是升序排列
for (let i = 0; i < ths.length; i++) {
if (ths[i] != this) {
ths[i].sortFlag = -1;
}
}
}表格排序应用很常见，在面试中也会有这样的题目。这个小案例做下来，受益匪浅。这是我在学习的某峰学院的JS课程中的一个案例，如果对JS掌握不扎实的同学，欢迎保存：链接: https://pan.baidu.com/s/1jHVy8Uq 密码: v4jk。如果链接失效，加Q群领取：154658901。
最近在学习js的表格排序，没想到看不起眼的表格排序实际上却暗含了众多JS知识点。在这里记录一下此次学习过程。希望对大家也有所帮助。
完整的表格排序涉及了下列这些知识点：
call方法使用
sort方法深入
数据绑定
DOM映射
下面详细的总结一下这些知识点，最后结合这些知识点实现下面这样一个表格排序案例。
完整的案例源码：https://github.com/daweihe/JS...
一、知识点总结
1、call方法使用
call方法的作用是改变方法中的this指向。
call这个方法是定义在Function.prototype的方法。我们定义的任何一个函数都可以认为它是Function这个类的一个实例。那么就可以通过实例的__proto__属性找到所属类的原型。任何一个函数都可以调用call和apply等方法。
先来看一个例子：
var obj = {
name : 'JS'
}
function testCall () {
console.log(this);
}
testCall.call( obj ); // {name: "JS"}首先函数testCall通过原型链查找机制找到call方法执行，call方法在执行过程中把调用call方法这个函数实例中的this都改变成call的第一个参数，接下来调用call方法的这个实例函数执行。
看两个题目：
function fn1() {
console.log(1);
console.log(this);
}
function fn2() {
console.log(2);
console.log(this);
}
fn1.call(fn2); //this -> fn2
fn1.call.call(fn2); //这里的call是改变function.__proto__.call的call方法中的this，相当于执行参数call方法在执行的时候，call方法的第一个参数是用来改变this的，而从第二个参数开始都是传给调用call的函数的参数。
在非严格模式下，给call方法不传递参数、或者传递null、undefined后，this都是指向window。
sum.call(); //window sum.call(null); //window sum.call(undefined); //window
严格模式下call执行的时候和非严格模式不同：
sum.call(); //undefined sum.call(null); //null sum.call(undefined); //undefined
下面使用call方法实现一个类数组转换为数组的方法：
function listToArray (likeAry) {
var ary = [];
try {
ary = Array.prototype.slice.call(likeAry);
} catch (e) {
for (var i = 0; i < likeAry.length; i ++) {
ary[ary.length] = likeAry[i];
}
}
return ary;
}和call类似的方法还有apply和bind方法，这里简单总结一下。
apply方法的作用和call方法一模一样，只是传参的形式不太一样，apply将函数的参数用数组包裹起来：
function sum(num1, num2) {
console.log(num2 + num1);
console.log(this);
}
sum.apply(null,[100,200]);bind方法同样也是用来改变this关键字的，但是它只是仅仅改变this指向，不立即执行调用this的函数。
function sum(num1, num2) {
console.log(num2 + num1);
console.log(this);
}
var obj = {name : 'zx'}
var temp = sum.bind(obj); //temp已经是被改变了this的函数
temp(100,200); //当我们需要的时候才执行
//或者像这样处理
var temp = sum.bind(null, 100, 200);
temp();bind方法体现了js中的预处理思想。
2、 sort排序深入
我们知道数组的sort方法只能排序10以内的数组。如果需要排序的数组中存在大于10的数字，我们就需要向sort方法中传入回调函数，常见的是这样：
ary.sort(function (a,b) {
return a - b;
});这样就能实现数组的升序排序。那么这样排序的原理到底是什么呢？
对于传入的两个参数：a代表的是找到的数组中的当前项，b代表的是当前项的后一项。
return a -b： 如果a大于b，返回结果，a与b交换位置。如果a小于b，那么a和b位置不变。 这是升序排序return b -a： 如果b大于a，返回结果，a与b交换位置。如果a小于b，那么a和b位置不变。 这是降序排序
了解了基本原理后，对于这样一个二维数组，如何实现按年龄排序？
var persons = [{
name:'dawei',
age:55
},{
name:'ahung',
age:3
},{
name:'maomi',
age:2
},{
name:'heizi',
age:78
},{
name:'afu',
age:32
}];其实很简单：
ary.sort(function(a,b){
return a.age - b.age;
});如果按姓名排序，则要涉及字符串的localeCompare()方法：
ary.sort(function(a,b){
return a.name.localeCompare(b.name);
});name.localeCompare()这个方法会根据两个字符串的字母进行比较，如果前一个字符串的第一个字母在24个英文字母中出现的位置比后一个字符串的第一个字符出现的位置靠前，则认定第一个字符串小，返回-1。如果出现的位置靠后，则认定第一个字符串大，返回1。如果所比较的字符相等。则比较下一个字符。
这个方法很实用，常用于按姓氏排序，对于汉字，该方法会自动将汉字转换为汉语拼音进行比较。
3、数据绑定
在js中一般使用动态绑定或者拼接字符串的方式实现数据绑定。
动态绑定：
//ary为需要添加到页面中的数据数组
var op = document.getElementById("box");//获取容器
var myUl = op.getElementsByTagName("ul")[0];//获取列表
var arrLength = ary.length;
for (var i = 0;i < arrLength ; i ++)
{ //动态创建元素
var oli = document.createElement("li");
oli.innerHTML = '<span>' + (i + 5) + '</span>' + ary[i].title;
myUl.appendChild(oli);//动态添加元素
}每添加一次就会引起一次DOM回流，如果数据量过大，这样则会严重影响性能。
关于DOM的回流与重绘，推荐大家看一下这篇文章：http://www.css88.com/archives...
拼接字符串：
var str = "";
for(var i=0; i<ary.length; i++){
str += '<li>';
str += '<span>';
str += (i+5);
str += '</span>';
str += ary[i].title;
str += '</li>';
}
myUl.innerHTML += str;这种方式虽然只引起一次回流，但是它会去除原来存在的元素中所有的事件和属性。如果我们为列表中的li标签添加鼠标移入，背景变色的事件，那么这种方法会使这个事件失效。
为了解决上面的两种数据绑定方法带来的问题，我们使用文档碎片来添加数据。
var frg = document.createDocumentFragment();//创建文档碎片
for (var i =0; i <ary.length ;i ++ ){
var li = document.createElement("li");
li.innerHTML = '<span>' + ( i + 5 ) + '</span>' + ary[i].title;
frg.appendChild(li);//将数据动态添加至文档碎片中
}
myUl.appendChild(frg); //将数据一次性添加到页面中
frg = null; //释放内存这样即只引起一次DOM回流，又会保留原来存在的事件。
4、DOM映射
DOM映射机制：所谓映射，就是指两个元素集之间元素相互“对应”的关系。页面中的标签集合和在JS中获取到的元素对象（元素集合）就是这样的关系。如果页面中的HTML标签结构发送变化，那么集合中对应的内容也会跟着自动改变。
<ul id="myul"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
对于这样一个列表使用下列脚本：
var myul = document.getElementById("myul");
var mylis = myul.getElementsByTagName('li');
for (var i = mylis.length - 1 ; i >= 0; i --) {
myul.appendChild(mylis[i]);
}
console.log(mylis.length); // 5将获取到的列表元素反序重新插入ul中，那么ul列表会变成下面这样：
<ul id="myul"> <li>5</li> <li>4</li> <li>3</li> <li>2</li> <li>1</li> </ul>
我们看到列表的长度依然是5，只是位置颠倒了。这是因为每个li标签和JS中获取的标签对象存在一个对应关系，当某个标签被重新插入到页面中时，页面中对应的标签会移动到插入的位置。这就是DOM映射。
二、实现表格排序
1、使用ajax获取数据
之所以使用动态获取数据，是为了使用文档碎片绑定数据。
var res = ''; //声明一个全局变量，接收数据
var xhr = new XMLHttpRequest();
xhr.open('get', 'date.txt', false);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
res = JSON.parse(xhr.responseText);
}
}
xhr.send(null);此时数据就保存在了res这个全局变量之中。
2、使用文档碎片绑定数据
var frg = document.createDocumentFragment();
for (let i = 0; i < res.length; i++) {
var tr = document.createElement("tr");
for (key in res[i]) {
var td = document.createElement("td");
td.innerHTML = res[i][key];
tr.appendChild(td);
}
frg.appendChild(tr);
}
tbody.appendChild(frg);3、对表格进行排序
这里涉及的点较多
//为两列添加点击事件
for (let i = 0; i < ths.length; i++) {
let curTh = ths[i];
curTh.sortFlag = -1; //用于对列进行升降序排列
curTh.index = i; //记录当前点击列的索引，便于排序操作
if (curTh.className == 'sort') {
curTh.onclick = function() {
sort.call(this); //改变排序函数内this的指向，让其指向当前点击列
}
}
}
//排序方法
function sort() {
//对数组元素进行排序
let target = this; //这里将this取出，因为在sort方法里需要使用该this，但是sort方法里的this是调用方法的数组
this.sortFlag *= -1; //1 代表升序 -1代表降序
let ary = listToArray(bodyTrs); //获取body数据
ary = ary.sort(function(a, b) {
let one = a.cells[target.index].innerHTML;
let two = b.cells[target.index].innerHTML;
let oneNum = parseFloat(one);
let twoNum = parseFloat(two);
if (isNaN(oneNum) || isNaN(two)) {
return one.localeCompare(two) * target.sortFlag;
} else {
return (oneNum - twoNum) * target.sortFlag;
}
});
//把排好序的数组重新写入页面
let frg = document.createDocumentFragment();
for (let i = 0; i < ary.length; i++) {
rg.appendChild(ary[i]);
}
tbody.appendChild(frg);
frg = null;
//点击某列时，要将其他列的排序标志恢复为-1，让下次再点击任意一个标签时都是默认是升序排列
for (let i = 0; i < ths.length; i++) {
if (ths[i] != this) {
ths[i].sortFlag = -1;
}
}
}以上内容就是原生JS实现表格排序，希望能帮助到大家。
jquery中tablesorter表格排序组件是如何使用的？
js表格排序实例详解（支持int,float,date,string四种数据类型）
以上是原生JS实现表格排序的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
PPT表格中插入的图片调整格式的操作步骤
Mar 26, 2024 pm 04:16 PM
1、新建一个PPT文件，命名为【PPT技巧】，作为示例。2、双击【PPT技巧】，打开PPT文件。3、插入两行两列的表格，作为示例。4、在表格的边框上双击，上方工具栏出现【设计】的选项。5、点击【底纹】的选项，点击【图片】。6、点击【图片】，弹出以图片为背景的填充选项对话框。7、在目录中找到要插入的托，点击确定即可插入图片。8、在表格框上右击，弹出设置的对话框。9、点击【设置单元格格式】，勾选【将图片平铺为底纹】。10、设置【居中】【镜像】等自己需要的功能，点击确定即可。注意：默认为图片填充在表格
如何在Windows 11/10中按拍摄日期对照片进行排序
Feb 19, 2024 pm 08:45 PM
本文将介绍如何在Windows11/10中根据拍摄日期对图片进行排序，同时探讨如果Windows未按日期排序图片应该如何处理。在Windows系统中，合理整理照片对于方便查找图像文件至关重要。用户可以根据不同的排序方式（如日期、大小和名称）来管理包含照片的文件夹。此外，还可以根据需要设置升序或降序排列，以便更灵活地组织文件。如何在Windows11/10中按拍摄日期对照片进行排序要按在Windows中拍摄的日期对照片进行排序，请执行以下步骤：打开图片、桌面或放置照片的任何文件夹在功能区菜单中，单
如何在Outlook中按发件人、主题、日期、类别、大小对电子邮件进行排序
Feb 19, 2024 am 10:48 AM
Outlook提供了许多设置和功能，可帮助您更有效地管理工作。其中之一是排序选项，可让您根据需要对电子邮件进行分类。在这个教程中，我们将学习如何利用Outlook的排序功能，根据发件人、主题、日期、类别或大小等条件对电子邮件进行整理。这将让您更轻松地处理和查找重要信息，提高工作效率。MicrosoftOutlook是一个功能强大的应用程序，可以方便地集中管理您的电子邮件和日历安排。您可以轻松地发送、接收和组织电子邮件，而内置的日历功能也让您能够方便地跟踪您即将面临的活动和约会。如何在Outloo
关于销量预测如何制作表格
Mar 20, 2024 pm 03:06 PM
能够熟练的制作表格不仅是会计、人事以及财务的必备技能，对于很多销售人员来说，学会制作表格也是很重要的。因为与销量有关的数据都是很多并且很复杂的，而且不是简单的记在文档当中，就可以说明问题的。为了能够让更多的销售人员熟练运用Excel来制作表格，小编接下来要介绍的就是有关于销量预测的表格制作问题，有需要的朋友不要错过哦！1，打开【销量预测及目标制定】，xlsm，来分析每个表格所存放的数据。2，新建【空白工作表】，选择【单元格】，输入【标签信息】。向下【拖拽】，【填充】月份。输入【其它】数据，点击【
wps数值怎样设置按条件自动变色_wps表格数值设置按条件自动变色的步骤
Mar 27, 2024 pm 07:30 PM
1、打开工作表，找到【开始】-【条件格式】按钮。2、点击列选择，选中将添加条件格式的列。3、单击【条件格式】按钮，弹出选项菜单国。4、选择【突出显示条件规则】-【介于】。5、填写规则：20，24，深填充色深绿色文本。6、确定后，所选列中数据按照设定对相应数字文字、单元框加色处理。7、对于没有冲突的条件规则，可以重复添加，但对于冲突规则wps则会以最后添加的规则代替之前建立的条件规则。8、重复添加【介于】规则20-24和【小于】20后的单元列。9、如需改变规则，刚可以清除规则后重新设定规则。
你知道Word表格怎么求和吗
Mar 21, 2024 pm 01:10 PM
有时候，我们在Word表格中会经常遇到计数的问题；一般遇到这样的问题，大部分同学都回把Word表格复制到Excel中来计算；还有一部分同学会默默地拿起计算器去算。那有没有快速的方法来计算呢？当然有啊，其实在Word中也是可以计算求和的。那么，你知道该怎么操作吗？今天，我们就来一起来看一下吧！废话不多说，有需要的小伙伴赶紧收藏起来吧！步骤详情：1、首先，我们打开电脑上的Word软件，打开需要处理的文档。（如图所示）2、接着，我们将光标定位在求和数值所在的单元格上（如图所示）；然后，我们点击【菜单栏
新手制作表格有哪些技巧
Mar 21, 2024 am 09:11 AM
我们经常在excel中制作和编辑表格，但是作为一个刚刚接触软件的新手来讲，如何使用excel制作表格，并没有我们使用起来那么轻松。下边，我们针对新手，也就是初学者需要掌握的表格制作的一些步骤进行一些演练，希望对需要的人有些帮助。新手表格示例样板如下图：我们看看如何来完成！1，新建excel文档，有两种方法。可以在【桌面】空白位置，点击鼠标右键-【新建】-【xls】文件。也可以【开始】-【所有程序】-【MicrosoftOffice】-【MicrosoftExcel20**】2，双击我们新建的ex
Word表格自动编号或序号怎样插入
Mar 20, 2024 am 09:30 AM
我们在制作表格时，第一想到的是会用Excel软件制作表格，但是你知道吗，其实Word软件制作表格也是非常方便的，有时我们在Word软件里进行表格制作的时候，需要输入序号或编号，如果是手动一个一个地输，那就非常地麻烦了，其实word软件里有一个操作能自动插入编号或序号，那么下面就和小编一起来学习Word表格自动编号或序号怎么插入的方法吧。1.首先建立一个Word文档，插入表格。 2.选中需要插入自动序号或编号的列或单元格。 3.点击“开始”—“编号”。 4.选择其中的一种样式的编号。 5.
