Using JavaScript difference to implement a comparison tool

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 node.js to develop a small tool for generating frame-by-frame animation
  • Node.js implements ticket grabbing gadget & SMS notification reminder function
  • Java9's JShell gadget and compiler two automatic optimization methods
  • Node.js implements JS file merging tool
  • JavaScript makes a small tool to convert sql to stringBuffer
  • Theory of creating a bookmarklet with js
  • A small tool for scheduled restart or shutdown written in hta[javascript]
  • The National Day is coming. Use JS to implement a small tool to generate a National Day style avatar. Detailed explanation of the implementation process

<<:  How to use Nginx to proxy multiple application sites in Docker

>>:  MySQL 5.7.23 decompression version installation tutorial with pictures and text

Recommend

Zabbix redis automatic port discovery script returns json format

When we perform automatic discovery, there is alw...

Ideas for creating wave effects with CSS

Previously, I introduced several ways to achieve ...

React realizes secondary linkage (left and right linkage)

This article shares the specific code of React to...

Super detailed MySQL8.0.22 installation and configuration tutorial

Hello everyone, today we are going to learn about...

Why is UTF-8 not recommended in MySQL?

I recently encountered a bug where I was trying t...

Why do code standards require SQL statements not to have too many joins?

Free points Interviewer : Have you ever used Linu...

Using Openlayer in Vue to realize loading animation effect

Note: You cannot use scoped animations! ! ! ! via...

JS function call, apply and bind super detailed method

Table of contents JS function call, apply and bin...

Overview and Introduction to Linux Operating System

Table of contents 1. What is an Operating System ...

Getting Started Tutorial on GDB in Linux

Preface gdb is a very useful debugging tool under...

Tutorial on customizing rpm packages and building yum repositories for Centos

1 Keep the rpm package downloaded when yum instal...

Full analysis of MySQL INT type

Preface: Integer is one of the most commonly used...

How to set underline in HTML? How to underline text in HTML

Underlining in HTML used to be a matter of enclos...

A brief discussion on HTML special character encoding CSS3 content: "I am a special symbol"

Some special characters and icons used in the pro...

Detailed explanation of TypeScript's basic types

Table of contents Boolean Type Number Types Strin...