将json数据显示在table上，并对该数据进行简单的模糊搜索

最新推荐文章于 2025-02-12 16:07:29 发布
最新推荐文章于 2025-02-12 16:07:29 发布
阅读量696 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gunHawk/article/details/42563057
本文介绍了一种使用JavaScript进行表格数据展示的方法，并实现了基于关键字的模糊搜索功能。该搜索功能支持对学生卡和教师卡的不同属性进行筛选，包括IMEI号、商品名称、入库批次和入库时间。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

假设有如下json数据：

var data = [
		{"IMEI" : "001" , "s_name" : "学生卡1" , "in_order" : "第一批" , "in_date" : "2014-10-11"}, 
		{"IMEI" : "002" , "s_name" : "学生卡2" , "in_order" : "第二批" , "in_date" : "2014-10-12"},
		{"IMEI" : "003" , "s_name" : "教师卡1" , "in_order" : "第三批" , "in_date" : "2014-10-13"},
		{"IMEI" : "004" , "s_name" : "教师卡2" , "in_order" : "第四批" , "in_date" : "2014-10-14"}
	]

html代码如下： 

<div class="app">
	<form action="" method="" class="form-inline" role="form">
		<div class="form-group">
			<label for="keyword" class="sr-only">关键字</label>
			关键字:<input type="text" name="keyword" id="keyword" class="form-control input-sm" style="width: auto;vertical-align: middle;" />
			<select  class="form-control input-sm">
				<option id="card_s" value="学生卡">学生卡</option>							
				<option id="card_t" value="教师卡">教师卡</option>
				
			</select>
			<select  class="form-control input-sm">
				<option id="offer">供应商</option>
				<option id="imei">IMEI</option>
				<option id="number">入库批次</option>
				<option id="date">入库时间</option>
			</select>
			<button class="btn btn-default btn-sm" type="button"  onclick="search();">搜索</button>
		</div>
	</form>
	<br/>
	<table class="table-bordered table-striped table-hover"  width="90%" id="table"/>
		<thead>
			<tr>
				<th style="width:10%"><input type="checkbox" name="box0" id="box0" /></th>
				<th style="width:20%">IMEI</th>
				<th style="width:20%">商品名称</th>
				<th style="width:20%">入库批次</th>
				<th style="width:30%">入库时间</th>
			</tr>							
		</thead>	
		<tbody id="tableBody"></tbody>
	</table>
</div>


显示数据： 

function showData(){
	var tableBody = document.getElementById("tableBody");	
	
	for(var i = 0;i < data.length;i++){
		var trTag = document.createElement("tr");	//创建tr标签
		trTag.id = i + 1;<span style="white-space:pre">				</span>//为tr标签创建id属性
		tableBody.appendChild(trTag);			//创建的tr标签添加到tableBody上
	}

	//在新建的每个tr标签内循环增加td标签
	var trBody = document.getElementById("tableBody").getElementsByTagName("tr");
	for(var j = 0;j < data.length;j++){
		trBody[j].innerHTML = "<td><input type='checkbox' name='' id='' /></td>"
		+ "<td>" + data[j].IMEI + "</td>"
		+ "<td>" + data[j].s_name + "</td>"
		+ "<td>" + data[j].in_order + "</td>"
		+ "<td>" + data[j].in_date + "</td>";			
	}
		
}<pre name="code" class="javascript">window.onload = function(){
	showData();
}



模糊搜索1（点击搜索按钮搜索，js实现方式有点笨，待优化）



function search(){
	var searchContent = document.getElementById("keyword").value;
	var trBody = document.getElementById("tableBody").getElementsByTagName("tr");
	var card_s = document.getElementById("card_s");
	var card_t = document.getElementById("card_t");
	if(searchContent == ""){
		showData();
	}
	else{
		//没有结果显示空
		for(var j = 0;j < data.length;j++){
			trBody[j].innerHTML = "";			
		}
		
		//历遍json文件找出匹配的数值并输出相应的行(模糊查找)
		for(var x in data){
			//学生卡搜索
			if(data[x].s_name.indexOf(card_s.value) != -1 && card_s.selected){
				if(data[x].IMEI.indexOf(searchContent) != -1){
					trBody[x].innerHTML = "<td><input type='checkbox' name='' id='' /></td>"
					+ "<td>" + data[x].IMEI + "</td>"
					+ "<td>" + data[x].s_name + "</td>"
					+ "<td>" + data[x].in_order + "</td>"
					+ "<td>" + data[x].in_date + "</td>";					
				}
				else if(data[x].s_name.indexOf(searchContent) != -1 ){
					trBody[x].innerHTML = "<td><input type='checkbox' name='' id='' /></td>"
					+ "<td>" + data[x].IMEI + "</td>"
					+ "<td>" + data[x].s_name + "</td>"
					+ "<td>" + data[x].in_order + "</td>"
					+ "<td>" + data[x].in_date + "</td>";					
				}
				else if(data[x].in_order.indexOf(searchContent) != -1){
					trBody[x].innerHTML = "<td><input type='checkbox' name='' id='' /></td>"
					+ "<td>" + data[x].IMEI + "</td>"
					+ "<td>" + data[x].s_name + "</td>"
					+ "<td>" + data[x].in_order + "</td>"
					+ "<td>" + data[x].in_date + "</td>";					
				}
				else if(data[x].in_date.indexOf(searchContent) != -1){
					trBody[x].innerHTML = "<td><input type='checkbox' name='' id='' /></td>"
					+ "<td>" + data[x].IMEI + "</td>"
					+ "<td>" + data[x].s_name + "</td>"
					+ "<td>" + data[x].in_order + "</td>"
					+ "<td>" + data[x].in_date + "</td>";					
				}
			}
			//教师卡搜索
			else if(data[x].s_name.indexOf(card_t.value) != -1 && card_t.selected){
				if(data[x].IMEI.indexOf(searchContent) != -1){
					trBody[x].innerHTML = "<td><input type='checkbox' name='' id='' /></td>"
					+ "<td>" + data[x].IMEI + "</td>"
					+ "<td>" + data[x].s_name + "</td>"
					+ "<td>" + data[x].in_order + "</td>"
					+ "<td>" + data[x].in_date + "</td>";					
				}
				else if(data[x].s_name.indexOf(searchContent) != -1 ){
					trBody[x].innerHTML = "<td><input type='checkbox' name='' id='' /></td>"
					+ "<td>" + data[x].IMEI + "</td>"
					+ "<td>" + data[x].s_name + "</td>"
					+ "<td>" + data[x].in_order + "</td>"
					+ "<td>" + data[x].in_date + "</td>";					
				}
				else if(data[x].in_order.indexOf(searchContent) != -1){
					trBody[x].innerHTML = "<td><input type='checkbox' name='' id='' /></td>"
					+ "<td>" + data[x].IMEI + "</td>"
					+ "<td>" + data[x].s_name + "</td>"
					+ "<td>" + data[x].in_order + "</td>"
					+ "<td>" + data[x].in_date + "</td>";					
				}
				else if(data[x].in_date.indexOf(searchContent) != -1){
					trBody[x].innerHTML = "<td><input type='checkbox' name='' id='' /></td>"
					+ "<td>" + data[x].IMEI + "</td>"
					+ "<td>" + data[x].s_name + "</td>"
					+ "<td>" + data[x].in_order + "</td>"
					+ "<td>" + data[x].in_date + "</td>";					
				}
			}
		}
	}
}



模糊搜索2（在搜索栏输入后即完成搜索）

function goSearch(s){
	var trBody = document.getElementById("tableBody").getElementsByTagName("tr");
for(var i = 0;i < trBody.length;i++){
	var td = trBody[i].getElementsByTagName("td");
	//在每一行的每列中查找
	for(var j = 0;j < td.length;j++){
		if(td[j].innerHTML.indexOf(s) == -1){
			trBody[i].style.display = "none";		//相应行隐藏
		}
		else{
			trBody[i].style.display = "";
			break;		//**找到符合则中断循环**
		}
	}
}













                

        

    

    
  



    



                



	

		

			

				
					
数据库领域JSON与数据挖掘的结合应用

				
			

			

				

					2502_91592937的博客
				

				

					05-13
					
					651
					
				

			

		

		

			
				
本文旨在探讨JSON(JavaScript Object Notation)这种轻量级数据交换格式在数据库领域与数据挖掘技术的结合应用。随着Web应用和大数据的快速发展，JSON已成为最流行的半结构化数据格式之一。我们将分析JSON在数据库中的存储方式、查询优化技术，以及如何应用数据挖掘算法从JSON数据中提取知识。本文首先介绍JSON的基本概念和数据库支持，然后深入探讨JSON数据挖掘的核心技术和算法，接着通过实际案例展示应用场景，最后讨论未来发展趋势。

			
		

	



                

            
              



	

		

			

				
					
Layui table实现数据表格列表搜索功能

				
			

			

				

					夏已微凉、
				

				

					07-03
					
					3241
					
				

			

		

		

			
				
Layui table实现数据表格列表搜索功能

			
		

	



              


  
              

                


	

		

			

				
					
jquery,ajax返回json对象，在table中显示

				
			

			

				

					iteye_19154的博客
				

				

					03-21
					
					278
					
				

			

		

		

			
				
[code="html"]
	
		
			
				发送号码
				接收号码
				日志类型
				日志时间
				发送状态
				解释口径
			
		
		
			
		
		
			
		
	
[/code]

[code="javascript"]

//清除Table
function clearRowsSMS(){
	var...

			
		

	





	

		

			

				
					
datatable 查询返回ＪＳＯＮ

				
			

			

				

					weixin_30911809的博客
				

				

					08-27
					
					108
					
				

			

		

		

			
				
DataTable dt = costFO.GetQueryTable(projectid, date);
                var newrow = from x in dt.Rows.Cast().Where(C => C.Field("CostMonthReportItem_Type") != "")
                             ...

			
		

	



		

			
		



	

		

			

				
					
后台传递Json数据封装在table中

				
			

			

				

					超超超超哥的博客
				

				

					11-10
					
					1316
					
				

			

		

		

			
				
后台返回的List集合
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>






Insert title here

	$(function() {
		 var tbody = "";  
		$.ajax({
			type : 'GET',
			url : 

			
		

	





	

		

			

				
					
下拉框中使用json格式数据并且支持模糊搜索

				
			

			

				

					chengsi101的博客
				

				

					06-23
					
					1886
					
				

			

		

		

			
				
最近开发新项目需要用到下拉框并且支持输入内容后自动搜索包含内容的值，但是由于底层返回值的方法已写死，返回的是一个json格式的数据，不适用于之前的加载方式（之前是返回list或者map，然后直接加载，但是不能进行模糊匹配，代码如下：）
$.ajax({
	url: url,
	dataType: 'json',
	async: false,
	type: "POST",
	success: fu

			
		

	





	

		

			

				
					
JavaScript根据Json数据来做的模糊查询功能

				
			

			

				

					weixin_30835923的博客
				

				

					07-19
					
					698
					
				

			

		

		

			
				
类似于百度搜索框的模糊查找功能
需要有有已知数据，实现搜索框输入字符，然后Js进行匹配，然后可以通过鼠标点击显示的内容，把内容显示在搜索框中
当然了，正则只是很简单的字符匹配，不具备多么复杂的判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"&g...

			
		

	





	

		

			

				
					
根据输入的筛选条件对本地json数据，进行模糊查询和分页查询

				
			

			

				

					杨丫丫的专栏
				

				

					07-03
					
					451
					
				

			

		

		

			
				
根据输入的筛选条件对本地json数据，进行模糊匹配查询和分页查询

			
		

	





	

		

			

				
					
MySQL JSON数据类型全解析（JSON datatype and functions）

					
最新发布

				
			

			

				

					m0_54850303的博客
				

				

					02-12
					
					2280
					
				

			

		

		

			
				
JSON（JavaScript Object Notation）是一种常见的信息交换格式，其简单易读且非常适合程序处理。MySQL从5.7版本开始支持JSON数据类型，本文对MySQL中JSON数据类型的使用进行一个总结。在MySQL中，JSON数据是以字符串形式表现的，但是它有自己的解析规则，利用某些途径可以将字符串转换为JSON类型数据，这个过程叫做规范化(normalization)，在规范化过程中，MySQL会对数据格式进行验证，若字符串不是有效的JSON格式，那么就会报错。

			
		

	





	

		

			

				
					
一文说透 MySQL JSON 数据类型（收藏）

				
			

			

				

					m0_67322837的博客
				

				

					05-09
					
					1万+
					
				

			

		

		

			
				
JSON 数据类型是 MySQL 5.7.8 开始支持的。在此之前，只能通过字符类型（CHAR，VARCHAR 或 TEXT ）来保存 JSON 文档。

相对字符类型，原生的 JSON 类型具有以下优势：

在插入时能自动校验文档是否满足 JSON 格式的要求。
	优化了存储格式。无需读取整个文档就能快速访问某个元素的值。
在 JSON 类型引入之前，如果我们想要获取 JSON 文档中的某个元素，必须首先读取整个 JSON 文档，然后在客户端将其转换为 JSON 对象，最后再通过对象获取指定元素的值。



			
		

	





	

		

			

				
					
json获取datatable后生成table分页显示checkbox全选

				
			

			

				

					12-18
				

			

		

		

			
				
*适用于查询，一次加载，减少访问服务器频率

*使用json获取datatable数据

*将datatable转换为table

*将table分页

*checkbox全选

			
		

	





	

		

			

				
					
 es针对字段的模糊查询

				
			

			

				

					weixin_34307464的博客
				

				

					06-26
					
					8814
					
				

			

		

		

			
				
参考
https://segmentfault.com/a/1190000004428116
query_string
{
    "query": {
        "query_string": {
             "query":"globalVar",
             "fields":["dataJson"...

			
		

	





	

		

			

				
					
JSONP跨域实现百度搜索框（关键字自动显示）

				
			

			

				

					qq_44606245的博客
				

				

					02-16
					
					234
					
				

			

		

		

			
				
JSONP跨域的使用流程
1.先声明一个函数，这个函数有一个形参。这个形参会拿到想要下载的数据，可以使用这个形参做后续的数据处理
2.在需要下载数据时，动态创建script标签，将标签的src设置成下载数据的链接
3.当script插入到页面时，就会调用已封装好的函数，将需要的数据传过来
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="view

			
		

	





	

		

			

				
					
用jsonp实现搜索框功能

				
			

			

				

					weixin_30505225的博客
				

				

					10-17
					
					182
					
				

			

		

		

			
				
用jsonp实现搜索框功能
前面的话：
 在上周本来想发一篇模仿必应搜索的界面。但是在准备写文章之前突然想到前面学习了ajax技术，在这里我也让我的页面有一种不需要手动刷新就能获取到数据。但是发现用前面的方法并不能获取到我想要的效果。无奈前几天电脑换系统，把之前的源码丢了（前面有个不好的习惯就是把最近在做的东西放桌面）。今天想彻底把这个问题搞明白。
用jquery和ajax...

			
		

	





	

		

			

				
					
elasticsearch-索引与分片实现原理

				
			

			

				

					豆豆不在了
				

				

					01-13
					
					1万+
					
				

			

		

		

			
				
添加索引

我们往 Elasticsearch 添加数据时需要用到 索引 —— 保存相关数据的地方。索引实际上是指向一个或者多个物理 分片 的
逻辑命名空间 。


一个 分片 是一个底层的 工作单元 ，它仅保存了全部数据中的一部分。在分片内部机制中，我们将详细介绍分片是如何工作的，而现在我们只需知道一个分片是一个
 Lucene 的实例，以及它本身就是一个完整的搜索引擎。我们的文档

			
		

	





	

		

			

				
					
ElasticSearch（一）

				
			

			

				

					Shine bright like a diamond ！
				

				

					11-16
					
					3127
					
				

			

		

		

			
				
什么是elasticsearch？一个开源的分布式搜索引擎，可以用来实现搜索、日志统计、分析、系统监控等功能什么是elastic stack（ELK）？是以elasticsearch为核心的技术栈，包括beats、Logstash、kibana、elasticsearch什么是Lucene？是Apache的开源搜索引擎类库，提供了搜索引擎的核心API分词器的作用是什么？创建倒排索引时对文档分词用户搜索时，对输入的内容分词IK分词器有几种模式？ik_smart：智能切分，粗粒度。

			
		

	





	

		

			

				
					
es查询，json格式查询,基础查询

				
			

			

				

					冬天来了的博客
				

				

					09-08
					
					5382
					
				

			

		

		

			
				
备注：

1、query及sort等条件为json格式的一级条件

1、单条件查询

query 中放筛选类型，match为单条件查询，match内部放筛选条件


{
	"query": {
		"match": {
			"seller.tax_code": "92510100MA6C5AH52D"
		}
	}
}

2、查询结果排序

sort代表排序，与query同一级别，sort内部放排序条件和排序方式（desc 降序，asc 升序）


{
	"query": {
		"match": {
	

			
		

	





	

		

			

				
					
es模糊查询

				
			

			

				

					Ax0592的博客
				

				

					03-18
					
					4367
					
				

			

		

		

			
				
BoolQueryBuilder.must(QueryBuilders.regexQuery("name", ".*" + student.getName() + ".*"));


			
		

	





	

		

			

				
					
Mysql JSON对象和JSON数组查询

					
热门推荐

				
			

			

				

					wnfff的博客
				

				

					08-03
					
					2万+
					
				

			

		

		

			
				
Mysql JSON查询

			
		

	





	

		

			

				
					
pgsql如何对json进行模糊查询

				
			

			

				

					07-28
				

			

		

		

			
				
PgSQL（PostgreSQL）可以使用`LIKE`运算符进行模糊查询，但是对于JSON数据类型，PgSQL提供了一系列特定的操作符和函数来进行模糊查询。  要在JSON字段中进行模糊查询，可以使用以下操作符和函数：  1. `->>`操作符：...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值