Using JavaScript difference to implement a comparison tool
|
Preface At work, I need to count the materials submitted by employees every week, but I don’t want to copy and paste them one by one, so I have to write a small tool to help me find who has not submitted the materials. Let’s fix the page first
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea {
/* border: none; */
width: 49%;
height: 400px;
/* font-size: 17pt; */
}
#btn {
width: 100%;
height: 50px;
position: relative;
top: 0px;
/* position: absolute; */
}
#p2 {
margin-left: 940px;
margin-top: -38px;
}
</style>
</head>
<body>
<button id="btn" class="ambi-light-button">Compare</button>
<textarea id="txt" type="text" placeholder="Should be submitted"></textarea>
<textarea id="txt2" type="text" placeholder="Submitted"></textarea>
<hr>
<p>Not submitted</p>
<p id="p2">List of absent persons has been submitted</p>
<textarea id="txt3" type="text" placeholder="Not submitted"></textarea>
<textarea id="txt4" type="text" placeholder="Submitted list of people not on the list"></textarea>
</body>
</html>
A bit ugly, but it doesn't matter if you use it yourself Start writing JS code
<script
//First get the input box and button let txt = document.querySelector('#txt')
let txt2 = document.querySelector('#txt2')
let txt3 = document.querySelector('#txt3')
let txt4 = document.querySelector('#txt4')
let btn = document.querySelector('#btn')
//Then write an array to find the difference const getDifference = function (a, b) {
//Explanation: If the two functions passed in are arrays if (a.constructor === Array && b.constructor === Array) {
let set1 = new Set(a);
let set2 = new Set(b);
// Use Set to remove duplicates and filter to find the difference return Array.from(new Set([...set1].filter(x => !set2.has(x))));
}
return null;
}
// Simply give the button a click event btn.onclick = function () {
//List of people who should submit let Should_sub = txt.value.split('\n')
//List of people who have not submitted yet let already_sub = txt2.value.split('\n')
let l3 = getDifference(Should_sub, already_sub)
//Number of people not submitted in the list let l4 = getDifference(already_sub, Should_sub)
//The filtered values are fed back to the two input boxes on the page txt3.value = l3.join('\n')
txt4.value = l4.join('\n')
}
</script>
Summarize This is the end of this article about using JavaScript difference to implement a comparison widget. For more relevant JS difference implementation comparison widget content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: How to use Nginx to proxy multiple application sites in Docker
>>: MySQL 5.7.23 decompression version installation tutorial with pictures and text
Recommend
Analysis of Linux configuration to achieve key-free login process
1.ssh command In Linux, you can log in to another...
Sublime / vscode quick implementation of generating HTML code
Table of contents Basic HTML structure Generate s...
Detailed explanation of MySQL/Java server support for emoji and problem solving
This article describes the support and problem so...
jQuery implements simple button color change
In HTML and CSS, we want to set the color of a bu...
Ajax responseText parses json data case study
Solve the problem that the responseText returned ...
Detailed explanation of the correct way to configure SSL (https certificate) in Apache on Ubuntu
First, take a look at Alibaba Cloud's officia...
How to use cursor triggers in MySQL
cursor The set of rows returned by the select que...
Detailed examples of variable and function promotion in JavaScript
js execution Lexical analysis phase: includes thr...
Analysis and Solution of ERROR:2002 Reported When MySQL Starts
Preface This article mainly introduces the analys...
Solve the problem of MySQL using not in to include null values
Notice! ! ! select * from user where uid not in (...
Recommended plugins and usage examples for vue unit testing
Table of contents frame First-class error reporti...
How to install and uninstall IIS7 components using the WIN2008 server command line
Note: Since .NET FrameWork cannot be run in core ...
Master-slave synchronization configuration and read-write separation of MySQL database
The benefits of using MySQL master-slave replicat...
How to deploy MySQL and Redis services using Docker
Table of contents How to deploy MySQL service usi...
Implementation of Jenkins+Docker continuous integration
Table of contents 1. Introduction to Jenkins 2. I...