JS-数据筛选

简介: JS-数据筛选

js-数据筛选

html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="./css/data.css" />
  </head>
  <body>
    <h1>排行榜</h1>
    <input type="text" / placeholder="输入搜索内容" oninput="seach(value)">
    <table>
      <thead>
        <tr>
          <th>
            排序
          </th>
          <th>
            姓名
          </th>
          <th onclick="sort()">
            交易量
          </th>
        </tr>
      </thead>
      <tbody>
 
      </tbody>
    </table>
    <script src="js/datas.js">
 
    </script>
  </body>
</html>

css:

* {
  margin: 0;
  padding: 0;
}
 
h1 {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
 
input {
  margin-left: 85%;
  border: 0;
}
 
table {
  width: 100%;
}
 
td,
th {
  height: 50px;
  text-align: center;
}
.div{
  font-size: 20px;
  font: 900;
}

js:

let data;
let xhr = new XMLHttpRequest();
xhr.open('get', './js/data.json', true);
xhr.send();
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    data = JSON.parse(xhr.responseText);
    console.log(data);
    apply(data);
  }
};
 
function apply(data) {
  let str = ``;
  for (let i = 0; i < data.length; i++) {
    str +=
      `<tr>
          <td>${i+1}</td>
          <td>${data[i].name}</td>
          <td>${data[i].data}</td>
          </tr>`
  }
  if (data.length == 0) {
    str +=
      `<tr>
          <td></td>
          <td class="div">暂无数据</td>
          <td></td>
          </tr>`
    document.getElementsByTagName('tbody')[0].innerHTML = str;
  } else {
    document.getElementsByTagName('tbody')[0].innerHTML = str;
  }
}
 
function sort() {
  if (sessionStorage.getItem('name') == 1) {
    data.sort((a, b) => a.data - b.data);
    sessionStorage.removeItem('name');
  } else {
    data.sort((a, b) => b.data - a.data);
    sessionStorage.setItem('name', '1');
  }
  apply(data);
}
 
 
function seach(target) {
  let arr = [];
  for (let i = 0; i < data.length; i++) {
    console.log(data[i].name);
    if (data[i].name.indexOf(target) >= 0 || String(data[i].data).indexOf(target) >= 0) {
      arr.push(data[i]);
    }
  }
 
  apply(arr);
}
相关文章
|
1月前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
2月前
|
JavaScript 数据安全/隐私保护
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
53 4
|
3月前
|
JavaScript 前端开发 安全
js逆向实战之烯牛数据请求参数加密和返回数据解密
【9月更文挑战第20天】在JavaScript逆向工程中,处理烯牛数据的请求参数加密和返回数据解密颇具挑战。本文详细分析了这一过程,包括网络请求监测、代码分析、加密算法推测及解密逻辑研究,并提供了实战步骤,如确定加密入口点、逆向分析算法及模拟加密解密过程。此外,还强调了法律合规性和安全性的重要性,帮助读者合法且安全地进行逆向工程。
100 11
|
2月前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
36 0
|
2月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
|
3月前
|
JSON JavaScript 前端开发
6-19|Python数据传到JS的方法
6-19|Python数据传到JS的方法
|
4月前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
68 0
|
4月前
|
移动开发 前端开发 JavaScript
前端表单验证的完美攻略:HTML5属性与JavaScript方法的无缝对接,让你的Web应用数据输入既安全又优雅
【8月更文挑战第31天】本文介绍前端表单验证的重要性及其实现方法,利用HTML5的内置属性如`required`、`pattern`和`minlength`进行基本验证,并借助JavaScript处理复杂逻辑,如密码确认。通过示例代码详细展示了如何结合两者实现高效且友好的表单验证,同时使用CSS增强用户体验。此方法简化开发流程并提升验证效果。
108 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
100 2
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
136 4