Jquery 操作表格在表格中查询

最新推荐文章于 2023-10-13 11:16:05 发布
最新推荐文章于 2023-10-13 11:16:05 发布
阅读量322 收藏 1
点赞数
分类专栏： WebUi 文章标签： javascript ViewUI

Jquery 

在js 中操作表示一般使用DOM 比较麻烦这里给大家介始一个

jquery 的使现

目的也是为了帮助朋友解决一个项目有的问题

 

<!--
/**
 * author liuqing
 * 2010-10-6 
 * 希望对大家有帮助
 */
-->
<html>
<head>
<style type="text/css">
//定义背景色CSS
.hover {
	background-color:#00f; color:#fff;
}
</style>
<!--引入Jquery枋心包-->
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script type="text/javascript">
//使用Jquery 为表格添加鼠标移动改变背景
$(document).ready(function() {
	$('tbody tr').hover (
		function() {
			$(this).find('td').addClass('hover');
		},
		function() {
			$(this).find('td').removeClass('hover');
		}
	);
});
</script>
<script type="text/javascript">
//查询方法
function seach() {
	$('#us').find('tbody tr').hide();
	var trs = $('#us').find('tbody tr');
	for (var i = 0 ; i < trs.length; i++) {
	    if ($(trs[i]).attr('id') == 1234 || $(trs[i]).attr('id') == 22233 
		|| $(trs[i]).attr('name') == 'aaa' || $(trs[i]).attr('title') == 'xy') {
			$(trs[i]).show();
		}
	}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>表格查询</title>
</head>

<body>
<input type="button" οnclick="seach()" value="2321321" />
<div id="usb">
<table width="100%" id="us" class="usb22" border="1">
 <thead>
  <tr>
    <th>username<input id="232" type="hidden" /></th>
    <th>password</th>
    <th>operation</th>
  </tr>
 </thead>
  <tbody>
  <tr id="1234" name="xxx">
    <td>Liuqing<input id="2321" type="hidden" /></td>
    <td>ewqewq</td>
    <td>ewqew</td>
  </tr>
  <tr id="222">
    <td>wewe<input id="2322" type="hidden" /></td>
    <td>ewe111111111111</td>
    <td>wewew</td>
  </tr>
  <tr id="222" title="xy">
    <td>weweTITLE<input id="2322" type="hidden" /></td>
    <td>ewe</td>
    <td>wewew</td>
  </tr>
  <tr id="22233">
    <td>Wanwanwan<input id="2322" type="hidden" /></td>
    <td>ewe</td>
    <td>wewew</td>
  </tr>
  <tr id="222" name="aaa" >
    <td>wewe<input id="2322" type="hidden" /></td>
    <td>ewe555555555</td>
    <td>wewew</td>
  </tr>
  </tbody>
</table>
</div>
</body>
</html>
 
cq_liuqing
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery 表格查询
今天最成功
08-25 298
   function seach() { var val = $('#ypname_query').val().toLowerCase(); var trs = $('table.data').find("tbody tr"); trs.hide(); var selTag = $('#querySelect'); for (var i = 0 ...
jquery通过AJAX从后台获取信息并显示在表格上。
QDY5945的博客
11-16 303
不想用Easyui的样式，但是想要他的表格功能，本来一开始是要到网上找相关插件的，但是没找到就开始自己写，没想到这么简单。 后台代码：（这个不重要） public ActionResult GetD...
Jquery对表格的一些简单应用 查询&即时匹配&点击高亮等
aozhou9334的博客
04-02 92
代码如下（暂时没有用原生js实现）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...
jQuery表格增删改查
qq_51462774的博客
12-19 1671
功能： 增加：复制第一行插入在最后 查询：在文本框中输入id号，查相对应的信息 删除：删除该行 修改：隐藏“修改”，显示“保存”，在非功能td里面插入文本框，在文本框中输入要修改的值，点击“保存” 保存：保存td里面input的值，点击保存以后，隐藏“保存”，显示“修改” body内标签 <p> <a href="#">增加</a> <input type="text"/> <a href="#">查询</a> .
超级简单的jquery操作表格方法
10-25
在操作表格行和列之前，首先要了解 jQuery 选择器和一些基础的 DOM 操作。 - **选择器**：jQuery 选择器用于选取 HTML 元素。如 `$("#test")` 选取 id 为 test 的元素。选择器的种类很多，如类选择器、属性选择器等...
JQuery对表格进行操作的常用技巧总结
12-03
使用 jQuery，我们可以快速筛选表格中包含特定内容的行并显示它们。以下示例展示了如何筛选出包含“李”字的所有行： ```javascript $(function(){ $(‘table tbody tr’).hide() // 隐藏所有行 .filter(":...
jquery 操作表格
04-05
虽然提供的文件没有直接提及插件，但了解这些插件对于理解jQuery表格操作的高级用法是有帮助的。 通过这些知识点，我们可以构建一个交互式的表格，不仅可以展示静态数据，还能响应用户操作，进行数据的动态更新和...
JQuery实现动态操作表格
10-20
当点击"add"按钮时，会触发一个事件处理器，该处理器首先获取当前表格中的行数，然后在表格的tbody部分末尾添加一个新行。新行中的每一列都包含一个文本输入框(input)，用于输入数据。为了删除当前行，每个添加按钮...
基于jQuery的表格操作插件
10-29
开发者可以设定一个值的范围，表格中相应数据的元素颜色将自动根据这个范围被设置，从而在视觉上帮助用户识别和区分信息。 7. JQTreeTable插件和jQuerytreeTable插件都是树形表格插件，它们能够将表格数据显示为树...
使用jQuery检查WEB页面中表格内容，并给出提示
sunzhenhua0608的专栏
06-17 1932
在WEB页面中常用到表格来展示数据，但是有时候需要检验某些个中展示的数据是否是我们想要的，如果不是，则要给出相应的提示，提示用户来修正错误。                     我开发的是JSP页面，为解决这个问题，起初我用的是Java脚本： 方法一：        for(int i=0;i              %>     注意：存在问题的记录有条
jquery查找一个table中的对象
黄彪博客
12-04 1054
下面的例子只要根据当前的obj就能够查找他的父级节点和兄弟节点。     usually function
jQuery实现表格内容的查找和隐藏
sonywangyi的博客
09-21 590
    前段时间碰到个小问题，需求是根据页面输入的参数将已经返回前台页面的内容查询过滤一遍，能查询匹配到的显示，其他隐藏。原理其实很简单就是查询到了调用jQuery的hide()方法即可，细节问题推敲调试即可，想想这种需求很普通平常就在各论坛网站搜索一番，大出本人意料的是大多实现十分复杂繁琐。本人现在就来一个简化版的。由于功能确实挺简单也就不讲解了，在JavaScript脚本里已经加了大量详细的代...
jQuery获取表格内容
weixin_43926275的博客
06-18 3885
一个表格往往是从后台获取数据，因此表格的内容往往只有孤立的tr、td标签，而不包含id、class、name这些可以直接被选择器识别的标签；而且从后台获取的数据往往是不断发生变化的，给表格加上id等标签也不太现实。实际应用种，经常需要获取到表格的数据内容，以便下一步的更新内容。 这里提供一种jQuery获取表格内容的一种方法。 示例页面： <html> <head> <script src="https://cdn.bootcdn.net/ajax/libs/jquer
五、jQuery 对表单、表格的操作（走过路过瞅瞅吧）
weixin_44009656的博客
05-06 2817
文章目录前言一、 表单应用1.1 单行文本框应用1.2 多行文本框应用1.3 复选框应用1.3 下拉框应用1.5 表单验证二、 表格应用2.1 表格变色2.1.1 普通的隔行变色2.1.2 单选框控制表格行高亮2.1.3 复选框控制表格行高亮2.2 表格展开关闭2.2.1 默认展开代码：2.2.2 默认收缩代码：2.3 表格内容筛选三、 其他应用3.1 网页字体大小3.2 网页选项卡3.3 网页换肤总结 前言 上一章讲解了jQuery 中的事件和动画 ，现在讲解jQuery 对表单、表格的操作。 一、
jQuery 实现table第几行第几列显示对应的数据
ARLENE2的博客
02-20 507
jQuery 实现table第几行第几列显示对应的数据
jQuery实现对Table内容的模糊查询
weixin_33893473的博客
06-26 575
2019独角兽企业重金招聘Python工程师标准>>> ...
jquery的表格组件-dataTables的基本使用
最新发布
Artisan_w
10-13 4592
jQuery DataTables 是一个功能丰富且灵活的 jQuery 插件，用于创建交互式的数据表格，提供搜索、排序、分页、筛选等功能，以便更好地展示和管理数据。通过使用 jQuery DataTables，你可以轻松地将数据集转换为易于浏览和交互的表格，而无需手动编写大量的 HTML 和 JavaScript 代码。它具有广泛的配置选项和扩展，使你能够适应不同的数据源和显示需求。
使用jQuery对表格实现增、删、改、查
qq_54000867的博客
12-04 5950
需求： 下面输入框输入框输入数据，点击增加按钮，将数据添加至表格末尾，id实现自增 在上面输入框输入姓名，点击查询按钮，过滤出指定姓名数据显示 点击删除超链接，删除对应的行 点击修改超链接，修改超链接文本变为保存，同时ID、姓名、年龄变成输入框可编辑状态，点击保存超链接，如果输入框为空，将提示不能为空，输入框不为空时，修改后的数据将保存至表格并显示，同时保存超链接文本变成删除超链接 运行结果 HTML代码： <input type="text" /> <input t
如何利用jquery 实现表格数据的搜索功能
04-01 389
在表格的操作中，常常会遇到通过关键字来搜索结果，这个功能用jquery的filter实现非常简单。 我以一个小例子说明： <table> <thead> <tr colspan="3"> <input type="text" id="filtertxt"> <input type="button" id...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值