javascript表格查询

最新推荐文章于 2022-08-01 09:08:47 发布
最新推荐文章于 2022-08-01 09:08:47 发布
阅读量1.3k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： JS/Ajax 文章标签： javascript function table input button search
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CutBug/article/details/1837620
本文介绍了一个简单的HTML页面，该页面包含一个可交互的表格。通过JavaScript实现了单元格的选择与高亮显示功能，并提供了基于选定列的文本搜索功能。此外，还提供了一键重置表格的功能。

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

今天看到web板块有人问此问题，自己在此基础上做了一个Demo

<html >   
<head >   
<title >   </title >   
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" / >   
</head >   
   

<script language="javaScript" >  
var g_SelectColor = "cyan";  //高亮显示颜色 
var g_SelectCells = [];      //选择列index集合
var g_TableOuterHTML = "";   //table 的 outerHTML

Array.prototype.contains = function(o)  
{ //判断数组arr中是否含有元素o
      var flag = false;
      for(var i=0;i<this.length;i++)
      {
         if(this[i]==o) 
         {
            flag = true;
            break;
         }
         
      }
      return flag;
}

function $(id)
{//取得对象
    return document.getElementById(id)
}

function init(objTable)
{//初始化table事件
    g_TableOuterHTML = objTable.outerHTML;
    objTable.onclick = function()
    {
        var objE = event.srcElement;
        if(objE.tagName=="TD")
        {
            var iCell = objE.cellIndex;
            with(objTable)
            {
                g_SelectCells.contains(iCell)?g_SelectCells.pop(iCell):g_SelectCells.push(iCell);
                for(var i=0;i<rows.length;i++)
                {
                    with(rows[i].cells[iCell])
                    {
                        if(bgColor=="")
                        {
                            bgColor=g_SelectColor;
                            
                        }else
                        {
                            bgColor="";
                        }
                    }//end with
                }// end for
            }// end with
           
        }//end if
           
    }
 
}

function Search(table,str)
{//查询
    var dis = "";
    for(var i=0;i<table.rows.length;i++)
    {
        for(var j=0;j<g_SelectCells.length;j++)
        {
            if(table.rows[i].cells[g_SelectCells[j]].innerText.indexOf(str)>-1)
            {
                dis = "block";
                break;
            }
            dis = "none";
        }
        table.rows[i].style.display=dis;
    }
}

function Reset(objTable)
{//重置table
    objTable.outerHTML = g_TableOuterHTML;
}

</script > 
<body onload="init($('Tbl1'))">   
<center >
<input id="condtext"  type="text" style="width:200" >   
<input type="button" value="查找" onclick="Search($('Tbl1'),$('condtext').value)"  >   
<input type="button" value="返回" onclick="Reset($('Tbl1'))"  > 
<br>   
<table  width="500" id="Tbl1" border="1" >   
<tr >  <td >1 </td >  <td >a </td >  <td >7 </td >  </tr > 
<tr >  <td >2 </td >  <td >b </td >  <td >6 </td >  </tr > 
<tr >  <td >3 </td >  <td >c </td >  <td >5 </td >  </tr > 
<tr >  <td >4 </td >  <td >d </td >  <td >4 </td >  </tr > 
<tr >  <td >5 </td >  <td >e </td >  <td >3 </td >  </tr > 
<tr >  <td >6 </td >  <td >f </td >  <td >2 </td >  </tr > 
<tr >  <td >7 </td >  <td >g </td >  <td >1 </td >  </tr >    
</table >   
</center >   
</body >  

</html >  
JS实现表格数据各种搜索功能
Mikyou的专栏
02-28 8276
JS实现表格数据各种搜索功能(忽略大小写,模糊搜索,多关键搜索)               window.onload=function(){     var oTab=document.getElementById("tab");     var oBt=document.getElementsByTagName("input");     oBt[1].onclick
js表格，可实现，分页、查询等操作
10-17
js表格，可实现客户端，分页、查询等操作,
JavaScript 表格数据搜索
Dove_1234的博客
09-09 360
HTML代码 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索..."> <table id="myTable"> <tr class="header"> <th style="width:60%;">名称</th> <th style="width:40%;">城市</th> </tr>
JavaScript实现动态查询表格
素象专栏F#5ebFydvZcX
03-13 1757
    JavaScript实现的一个动态查询表格，随着文本框中资料的改变，下边Table中的资料会自动筛选。 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE <!-- //the function of trim
JS实现表格搜索内容
测试领域专家，多领域测试技术、管理、工具都略懂，略懂一二
10-21 7337
页面有表格的时候我们都会含有搜索功能，例如： html和CSS略（源码滑倒底部），直接上JS： function myFunction() { //如果有搜索按钮，定义一个onclick即可 // 声明变量 var input, filter, table, tr, td, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); //toUpperCase()是不区分大小写
js查找当前列表
weixin_43994675的博客
01-10 807
//根据阈值列表查询frr表格数据 searchthreshold() { let data = []; let arr1 = this.threshold; //当前列表 let arr2 = this.frrthresholdList; //全列表 if (!arr1.length) { data = this.frrthresholdList; } else { data = arr2.filt..
Javascript 表格操作实现代码
10-29
Javascript 表格操作实现代码 Javascript 是一种广泛应用于 Web 开发的脚本语言，它可以用来实现网页的交互效果和动态更新。在本文中，我们将通过实例代码来介绍如何使用 Javascript 实现表格操作，包括获取表格值...
javascript操作表格
12-09
在网页设计中，JavaScript 提供了一种强大而灵活的方式，使用户可以与表格进行交互，例如添加、删除、编辑单元格或行，以及排序数据。 在给定的描述中，我们看到一个CSS样式代码，它定义了表格及其元素（如`<input>...
javascript表格随机排序代码
10-30
1. javascript表格随机排序概念：在Web开发中，我们经常需要对表格中的行或者列进行随机排序，以达到更好的用户体验或者实现某些特定功能。javascript提供了强大的数组操作方法和对象操作方法，可以轻松实现表格的...
JavaScript表格常用操作方法汇总
10-24
在JavaScript中，表格是一种常见的数据展示方式，用于组织和呈现结构化的信息。本文将详细介绍JavaScript中对表格进行操作的方法，包括创建、添加、删除和遍历等常见技巧。 1. **创建表格** 创建表格通常通过`...
javascript表格隔行变色加鼠标移入移出及点击效果的方法
12-11
本文主要探讨了如何使用JavaScript实现表格隔行变色、鼠标移入移出以及点击效果，以增强表格的可读性和用户的操作体验。 首先，隔行变色是一种常见的视觉分隔技巧，它有助于用户在查看大量数据时避免混淆行与行之间...
JS表格之各种搜索应用
qq_44586361的博客
02-07 324
搜索 忽略大小写-toLowerCase实现大小写转换 模糊搜索-search的使用 多关键词-split的使用 &lt;! DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script&gt; window.function() { var oTab=document.getEleme...
js练手小项目——JavaScript 表格数据搜索和element-ui使用
JIAY_WX的博客
07-13 443
JavaScript 表格数据搜索和element-ui使用
前端js列表查询策略
weixin_43239880的博客
08-01 971
就是说你的v-model绑定的什么，你就用什么进行查询（此时为粤B888，则就按粤B888查询）。如果查询页数为1000页，但是在该页上没有内容，则应该将页码设置为1，再次进行查询。但是里面一个非常容易出bug的地方就是，当用户直接输入了一个内容，没有点击查询按钮，而是直接去点击了页码进行查询。或者说应该是怎么样的，我们都应该需要清楚的问清楚产品。这里也可以理解，毕竟你没有点击搜索按钮，所有你不点搜索按钮就点了页码跳转的话，就不会用你现在的条件查询（可以参考天猫，京东的搜索也是该策略）。...
JavaScript document 对表格内容搜索 模糊搜索 多个关键字搜索
hyzhang6的博客
10-12 8045
作者：hyzhang 时间：2017-10-11 描述：document 搜索 模糊搜索 --> /*tr:hover{ color: yellow; }*/ window.onload=function(){ var etable = document.getElementById("tbe"); var btn1 =document.getElem
javascript表格实现模糊查询
weixin_34309435的博客
08-17 1123
相关知识 toLowerCase()实现查询不区分大小写 search()用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。 var par="hello word"; console.log(par.search("he")); 如果找到匹配字符串，返回匹配字符串的索引，如果没有找到任何匹配的字符串，则返回-1。 ...
用JavaScript实现根据输入框内容，搜索表格，被检索项高亮显示
weixin_44439442的博客
02-18 1243
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; table{width
用Javascript实现对HTML表格简单的增删查改
热门推荐
秘密基地
08-08 1万+
在网页制作的过程中，有时候需要对表格进行操作，下面是一个简易的表格操作方案：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>对表格操作</title> <style type="text/css"> *{ padding:0px; margn:0px; } table#stuRecordT
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值