JavaScript实现筛选内容功能

问题遇到的现象和发生背景

<table>
  <tr>
    <td>邮箱数据A列</td>
    <td>邮箱数据B列</td>
    <td>邮箱数据C列</td>
  </tr>
  <tr>
    <td><textarea  name="textarea2"  id="textarea2"    style="width:260px; height:300px;" >
111@aaa.com
222@bbb.com
333@ccc.com
444@aaa.com
555@ddd.com
333@ccc.com
666@eee.com
        </textarea>
    </td>
    <td>
        <textarea  name="textarea2"  id="textarea2"    style="width:260px; height:300px;" >
222@bbb.com
333@ccc.com
555@ddd.com
999@zzz.com
      </textarea>
    </td>
    <td>
        <textarea  name="textarea3"  id="textarea3"    style="width:260px; height:300px;" >
111@aaa.com
444@aaa.com
666@eee.com
      </textarea>
    </td>
  </tr>
    <tr>
    <td colspan="3">
        邮箱数据A列为输入的很多列邮箱数据 textarea</br>
        邮箱数据B列为输入的很多列邮箱数据 textarea</br>
        邮箱数据C列为从数据A中减去所有数据B中的数据 textarea；输入A和B后自动得出C</br>
    </td>
  </tr>
</table>

需要的结果是在A和B中输入数据，C自动将A中的数除去所有B中的数据显示在C中

帮忙把代码都详细的写出来哈

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

5条回答默认最新

Beq 2022-08-22 15:33

关注


<!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>
</head>
<body>
  <table>
    <tr>
      <td>邮箱数据A列</td>
      <td>邮箱数据B列</td>
      <td>邮箱数据C列</td>
    </tr>
    <tr>
      <td><textarea  name="textarea2"  id="textarea1" oninput="handler"   style="width:260px; height:300px;" >
  111@aaa.com
  222@bbb.com
  333@ccc.com
  444@aaa.com
  555@ddd.com
  333@ccc.com
  666@eee.com
          </textarea>
      </td>
      <td>
          <textarea  name="textarea2"  id="textarea2" oninput="handler"    style="width:260px; height:300px;" >
  222@bbb.com
  333@ccc.com
  555@ddd.com
  999@zzz.com
        </textarea>
      </td>
      <td>
          <textarea  name="textarea3"  id="textarea3"    style="width:260px; height:300px;" >

        </textarea>
      </td>
    </tr>
      <tr>
      <td colspan="3">
          邮箱数据A列为输入的很多列邮箱数据 textarea</br>
          邮箱数据B列为输入的很多列邮箱数据 textarea</br>
          邮箱数据C列为从数据A中减去所有数据B中的数据 textarea；输入A和B后自动得出C</br>
      </td>
    </tr>
  </table>
 <script>
   function handler(){
    var list_a = document.querySelector('#textarea1').value.split('\n').map(item=>item.trim())
    var list_b = document.querySelector('#textarea2').value.split('\n').map(item=>item.trim())
    var value_c = []
    value_c = list_a.filter(i=>!list_b.includes(i)).join('\n')
    document.querySelector('#textarea3').value = value_c
   }
   const a = document.querySelector('#textarea1');
   const b =document.querySelector('#textarea2')
   a.addEventListener('input',handler)
   b.addEventListener('input',handler)
   handler()
 </script>  
</body>
</html>

本回答被题主选为最佳回答 , 对您是否有帮助呢?

编辑记录

查看更多回答(4条)

报告相同问题？

关注问题

javascript编程语言怎么实现交换4个数字，即abcd，要转换成dcba javascript
2018-06-09 05:32

回答 11 已采纳 http://www.w3school.com.cn/jsref/jsref_reverse.asp
javascript编程语言怎么实现拖动div并且保存div的布局 javascript
2018-07-23 03:39

回答 3 已采纳 [拖动并且保存位置](http://www.w3dev.cn/download/20090623/drag-save-position.aspx "")
油猴 JavaScript 脚本如何实现跳过回答 javascript 开发语言有问必答
2021-09-11 15:22

回答 1 已采纳这种需要针对性的写js脚本才行。先用chrome开发工具检查下弹出的题目dom包含什么样式或者是否有 id，用计时器setInterval定时检查dom是否存在，存在就移除题目。然后获取视频播放器控件
【面试真题】Javascript 实现多条件过滤数组
2024-01-30 21:26

编程轨迹_的博客面试真题：Javascript 实现多条件过滤数组
用JavaScript怎么实现选择生日的功能 html5 javascript
2017-03-19 04:37

回答 6 已采纳这篇文章实现了你的需求。http://blog.csdn.net/u011407281/article/details/42643451
利用javascript实现数据转换的功能
2016-10-21 12:25

回答 1 已采纳 http://www.uedsc.com/javascript-number-to-chinese.html
Java编程方法实现 javascript 有问必答
2021-06-29 10:00

回答 2 已采纳如有帮助，请采纳。点击我回答右上角【采纳】按钮。 public class Test{ public static void main(String[] args) {
最全面编程语言使用手册
2010-06-09 13:03

在网上查找了好久，经过筛选后挑出的，现在跟大家分享·说明：该资源绝对是网站建设编程人员和VB程序初，中级设计人员的福音，该压缩包包含了CSS JavaScript Jscript VBScript VB等五种编程语言的函数语法等方面的...
如何利用javascript语言的ajax功能实现从后台调用前台的变量并且做出判断？ javascript
2018-09-13 07:53

回答 4 已采纳 http://www.w3school.com.cn/jquery/ajax_ajax.asp
html实现评论与回复功能 css html5 javascript
2019-04-29 16:48

回答 1 已采纳 https://download.csdn.net/download/u013139368/10433899
用javascript实现选项卡功能
2016-05-26 15:38

回答 1 已采纳 ``` window.onLoad=function(){ 是onload，l是小写另 adiv[this.index]="show"; 这么写不对吧 adiv
todos:自制JavaScript待办事项清单MVC Web应用程序
2021-05-11 07:51

ES6语言功能事件传播 CSS Flexbox CSS定位网络存储API MVC设计模式关于该项目的灵感来自计划，目的是成为一个完全交互式的Web应用程序，以跟踪待办事项。该存储库代表TodoMVC组引入的概念的原始且独立的...
JavaScript面向对象编程问题 javascript
2016-02-13 03:18

回答 3 已采纳我大致看了下，您的意思是不是在不使用这个Array的构造器和相关数组文本标志法的情况下进行这个Array的操作这是一个数据结构的封装问题把其他的都好说，就是这个数组文本标志法 a.[a.le
awesome-fp-js：精选的js很棒的功能性编程内容清单
2021-02-26 05:36

作为一种多范式编程语言，JavaScript可以用多种样式编写。借助这些资源，我们希望帮助您更好地利用JavaScript对以功能方式编写程序的支持。函数式编程是一种将计算建模为表达式求值的。与命令式编程相反，命令...
JavaScript 网页编程（一）——JavaScript 基础语法
2020-03-22 22:49

Lyrelion的博客一.计算机编程基础 1.计算机语言分类机器语言，汇编语言，高级语言。 ①机器语言：计算机最终所执行的都是 01机器语言。 ②汇编语言：和机器语言...编程语言是主动的，有很强的逻辑性。标记语言不向计算机...
没有解决我的问题, 去提问