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

Solution to high CPU usage of Tomcat process

Using JavaScript difference to implement a comparison tool

Solution to high CPU usage of Tomcat process

MySQL scheduled task implementation and usage examples

Implementation of adding remark information to mysql

How to submit the value of a disabled form field in a form Example code

Use VSCode's Remote-SSH to connect to Linux for remote development

HTML+CSS+jQuery imitates the search hot list tab effect with screenshots

Example of how to optimize MySQL insert performance

In-depth understanding of javascript prototype and prototype chain

Pure CSS3 to achieve mouse over button animation Part 2

Example steps for using AntV X6 with Vue.js

Recommend

Solution to PHP not being able to be parsed after nginx installation is complete

The effect of CSS dynamic gradient border rotating around the content area (example code)

npm Taobao mirror modification explanation

How to optimize the slow Like fuzzy query in MySQL

Summary of the differences between global objects in nodejs and browsers

Detailed explanation of how to clear a few pixels of blank space under an image using CSS

Reasons and solutions for being unable to remotely connect to MySQL database under CentOS7

Learn Vue middleware pipeline in one article

Summary of Mysql slow query operations

A brief discussion on two methods of achieving semi-transparent background color in CSS

The Complete Guide to Grid Layout in CSS

Add crontab scheduled tasks to debian docker container

Common causes and solutions for slow MySQL SQL statements

Detailed explanation of solving the problem of cross-domain access of nginx/apache static resources

HTML meta explained