네이티브 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 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7681
15
1393
52
1209
24
91
11
73
19
Windows 11/10에서 촬영한 날짜별로 사진을 정렬하는 방법
Feb 19, 2024 pm 08:45 PM
이 기사에서는 Windows 11/10에서 촬영 날짜에 따라 사진을 정렬하는 방법을 소개하고 Windows에서 날짜별로 사진을 정렬하지 않는 경우 해결 방법에 대해 설명합니다. Windows 시스템에서는 이미지 파일을 쉽게 찾으려면 사진을 적절하게 정리하는 것이 중요합니다. 사용자는 날짜, 크기, 이름 등 다양한 정렬 방법을 기반으로 사진이 포함된 폴더를 관리할 수 있습니다. 또한 필요에 따라 오름차순 또는 내림차순을 설정하여 파일을 보다 유연하게 정리할 수 있습니다. Windows 11/10에서 촬영한 날짜별로 사진을 정렬하는 방법 Windows에서 촬영한 날짜별로 사진을 정렬하려면 다음 단계를 따르세요. 사진, 바탕화면 또는 사진을 저장한 폴더를 엽니다. 리본 메뉴에서
PPT 표에 삽입된 그림의 형식을 조정하는 단계
Mar 26, 2024 pm 04:16 PM
1. 예시처럼 새 PPT 파일을 만들고 이름을 [PPT Tips]로 지정합니다. 2. [PPT 팁]을 더블클릭하여 PPT 파일을 엽니다. 3. 예를 들어 행 2개와 열 2개로 구성된 표를 삽입합니다. 4. 테이블 테두리를 더블클릭하면 상단 툴바에 [디자인] 옵션이 나타납니다. 5. [음영] 옵션을 클릭한 후 [그림]을 클릭하세요. 6. [그림]을 클릭하면 그림을 배경으로 채우기 옵션 대화 상자가 나타납니다. 7. 디렉토리에서 삽입하려는 트레이를 찾은 후 확인을 클릭하여 그림을 삽입하세요. 8. 테이블 상자를 마우스 오른쪽 버튼으로 클릭하여 설정 대화 상자를 불러옵니다. 9. [셀 서식]을 클릭하고 [이미지를 음영으로 배열]을 선택하세요. 10. [중앙], [미러] 및 기타 필요한 기능을 설정한 후 확인을 클릭하세요. 참고: 기본값은 테이블에 그림을 채우는 것입니다.
Outlook에서 보낸 사람, 제목, 날짜, 카테고리, 크기별로 이메일을 정렬하는 방법
Feb 19, 2024 am 10:48 AM
Outlook은 작업을 보다 효율적으로 관리하는 데 도움이 되는 다양한 설정과 기능을 제공합니다. 그 중 하나는 필요에 따라 이메일을 분류할 수 있는 정렬 옵션입니다. 이 튜토리얼에서는 Outlook의 정렬 기능을 사용하여 보낸 사람, 제목, 날짜, 카테고리 또는 크기와 같은 기준에 따라 전자 메일을 구성하는 방법을 알아봅니다. 이렇게 하면 중요한 정보를 더 쉽게 처리하고 찾을 수 있어 생산성이 높아집니다. Microsoft Outlook은 이메일과 달력 일정을 중앙에서 쉽게 관리할 수 있게 해주는 강력한 애플리케이션입니다. 이메일을 쉽게 보내고 받고 정리할 수 있으며, 내장된 캘린더 기능을 통해 다가오는 이벤트와 약속을 쉽게 추적할 수 있습니다. Outloo에 참여하는 방법
판매 예측 테이블을 만드는 방법
Mar 20, 2024 pm 03:06 PM
능숙하게 양식을 작성할 수 있다는 것은 회계, 인사, 재무에 필요한 기술일 뿐만 아니라 많은 영업사원에게도 매우 중요합니다. 왜냐하면 매출과 관련된 데이터는 매우 크고 복잡하며, 문제를 설명하기 위해 단순히 문서에 기록할 수는 없기 때문입니다. 더 많은 영업사원들이 엑셀을 능숙하게 활용하여 테이블을 만들 수 있도록 편집자가 판매예측에 관한 테이블 만들기 이슈를 소개합니다. 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 테이블을 복사하고 일부 학생들은 자동으로 계산기를 사용합니다. 빨리 계산하는 방법이 있나요? 물론, 실제로 합계는 Word에서도 계산할 수 있습니다. 그럼 어떻게 하는지 아시나요? 오늘은 함께 살펴보시죠! 더 이상 고민하지 말고, 도움이 필요한 친구들은 빨리 수집해야 합니다! 단계 세부사항: 1. 먼저 컴퓨터에서 Word 소프트웨어를 열고 처리해야 하는 문서를 엽니다. (그림 참조) 2. 다음으로 합산된 값이 있는 셀에 커서를 놓고(그림 참조) [메뉴 모음]을 클릭합니다.
Word에서 테이블을 가로 및 세로로 전환하는 방법
Mar 20, 2024 am 09:31 AM
Word 소프트웨어는 우리에게 없어서는 안될 소프트웨어이며 자주 사용해야 합니다. 이전에 Word 소프트웨어를 사용하여 표를 편집하는 방법을 배웠습니다. 그러나 실수로 표를 가로 및 세로 방향으로 편집하면 다시 시간을 낭비하고 싶지 않습니다. -만들고 보니 테이블의 가로, 세로 방향을 바꿀 수 있나요? 대답은 당연히 그렇습니다.다음으로 편집자가 Word에서 테이블을 가로 및 세로로 바꾸는 방법을 자세히 소개하겠습니다. 먼저 아래 Word 표의 행과 열을 바꿔야 합니다. 이렇게 하려면 먼저 테이블 전체를 선택한 다음 마우스 오른쪽 버튼을 클릭하고 복사 기능을 선택해야 합니다. 2단계: 복사를 선택한 후 단어를 최소화한 다음 Excel 테이블을 열고 마우스 오른쪽 버튼을 클릭하고 붙여넣기를 선택한 다음 Exc에 붙여넣습니다.
Word 표에 자동 번호 매기기 또는 일련 번호를 삽입하는 방법
Mar 20, 2024 am 09:30 AM
우리가 표를 만들 때 가장 먼저 생각하는 것은 엑셀 소프트웨어를 사용하여 표를 만드는 것인데, 실제로는 워드 소프트웨어로 표를 만들 때 매우 편리하다는 사실을 알고 계셨나요? 워드 소프트웨어로 표를 만들 때 일련번호를 입력해야 할 때가 있습니다. 또는 숫자를 일일이 입력하면 매우 번거롭습니다. 사실 워드 소프트웨어에는 숫자나 일련번호를 자동으로 삽입하는 기능이 있으므로, 자동번호 삽입 방법을 에디터와 함께 배워보겠습니다. 또는 일련 번호를 Word 테이블로 변환합니다. 1. 먼저 Word 문서를 만들고 표를 삽입합니다. 2. 자동 일련번호나 번호를 삽입하려는 열이나 셀을 선택합니다. 3. "시작" - "번호"를 클릭하세요. 4. 스타일 번호 중 하나를 선택합니다. 5.
