`
jinjc
  • 浏览: 15441 次
  • 性别: Icon_minigender_1
  • 来自: 江苏
社区版块
存档分类
最新评论

jquery表格筛选

jQueryHTML 
阅读更多 
$(function(){
    $("#wc").change(function(){
        $("#jd tbody tr")
            .hide()
	   .filter(":contains('"+( $(this).val() )+"')")
	   .show();
    }).change();
})


<font size="2" color="#0000FF">工序筛选：</font>
<select id="wc">
<option value="">全部</option>
<option>剪折冲</option>
<option>喷塑</option>
<option>下料</option>
<option>抛光</option>
<option>冲折</option>
<option>打弯</option>
</select>


<table id="jd" class="datalist" width="100%">
<thead>
  <tr>
    <td width="5%" align="center" background="images/list.jpg"><font color="#004D73">订单号</font></td>
    <td width="18%" align="center" background="images/list.jpg"><font color="#004D73">订单内容</font></td>
    <td width="12%"  align="center" background="images/list.jpg"><font color="#004D73">物料名称</font></td>
    <td width="4%"  align="center" background="images/list.jpg"><font color="#004D73">单位</font></td>
    <td width="6%"  align="center" background="images/list.jpg"><font color="#004D73">工序</font></td>
    <td width="4%" align="center"  background="images/list.jpg"><font color="#004D73">加工数</font></td>
    <td width="10%" align="center"  background="images/list.jpg"><font color="#004D73">要求完工日期</font></td>
    <td width="10%" align="center"  background="images/list.jpg"><font color="#004D73">实际开始日期</font></td>
    <td width="10%" align="center"  background="images/list.jpg"><font color="#004D73">实际完工日期</font></td>
    <td width="20%" align="center"  background="images/list.jpg"><font color="#004D73">完成情况描述</font></td>
  </tr>
</thead>  
<tbody>
  <tr onmousemove="this.bgColor='#FFFF99';" onmouseout="this.bgColor='#ffffff';">
    <td width="5%" align="center" >82683</td>
    <td width="18%" align="left" >漳州金龙客车有限公司<br>双内摆门泵总成-6745J13C中门</td>
    <td width="12%" align="left" >上摆臂    </td>
    <td width="4%" align="center" >只</td>
    <td width="6%" align="center" >冲折</td>
    <td width="4%" align="center" >12</td>
    <td width="10%" align="center" >2009年8月18日20时</td>
    <td width="10%" align="center" ></td>
    <td width="10%" align="center" ></td>
    <td width="15%" align="left" ></td>
  </tr>
  <tr onmousemove="this.bgColor='#FFFF99';" onmouseout="this.bgColor='#ffffff';">
    <td width="5%" align="center" >82683</td>
    <td width="18%" align="left" >漳州金龙客车有限公司<br>双内摆门泵总成-6745J13C中门</td>
    <td width="12%" align="left" >下摆臂    </td>
    <td width="4%" align="center" >只</td>
    <td width="6%" align="center" >冲折</td>
    <td width="4%" align="center" >12</td>
    <td width="10%" align="center" >2009年8月18日20时</td>
    <td width="10%" align="center" ></td>
    <td width="10%" align="center" ></td>
    <td width="15%" align="left" ></td>
  </tr>
  <tr onmousemove="this.bgColor='#FFFF99';" onmouseout="this.bgColor='#ffffff';">
    <td width="5%" align="center" >82683</td>
    <td width="18%" align="left" >漳州金龙客车有限公司<br>双内摆门泵总成-6745J13C中门</td>
    <td width="12%" align="left" >圆管摆臂    </td>
    <td width="4%" align="center" >只</td>
    <td width="6%" align="center" >打弯</td>
    <td width="4%" align="center" >6</td>
    <td width="10%" align="center" >2009年8月18日20时</td>
    <td width="10%" align="center" ></td>
    <td width="10%" align="center" ></td>
    <td width="15%" align="left" ></td>
  </tr>
  <tr onmousemove="this.bgColor='#FFFF99';" onmouseout="this.bgColor='#ffffff';">
    <td width="5%" align="center" >82683</td>
    <td width="18%" align="left" >漳州金龙客车有限公司<br>双内摆门泵总成-6745J13C中门</td>
    <td width="12%" align="left" >托盘    </td>
    <td width="4%" align="center" >块</td>
    <td width="6%" align="center" >剪折冲</td>
    <td width="4%" align="center" >3</td>
    <td width="10%" align="center" >2009年8月18日20时</td>
    <td width="10%" align="center" ></td>
    <td width="10%" align="center" ></td>
    <td width="15%" align="left" ></td>
  </tr>
  <tr onmousemove="this.bgColor='#FFFF99';" onmouseout="this.bgColor='#ffffff';">
    <td width="5%" align="center" >82683</td>
    <td width="18%" align="left" >漳州金龙客车有限公司<br>双内摆门泵总成-6745J13C中门</td>
    <td width="12%" align="left" >滑道连接板    </td>
    <td width="4%" align="center" >块</td>
    <td width="6%" align="center" >剪折冲</td>
    <td width="4%" align="center" >3</td>
    <td width="10%" align="center" >2009年8月18日20时</td>
    <td width="10%" align="center" ></td>
    <td width="10%" align="center" ></td>
    <td width="15%" align="left" ></td>
  </tr>
  <tr onmousemove="this.bgColor='#FFFF99';" onmouseout="this.bgColor='#ffffff';">
    <td width="5%" align="center" >82683</td>
    <td width="18%" align="left" >漳州金龙客车有限公司<br>双内摆门泵总成-6745J13C中门</td>
    <td width="12%" align="left" >导向轮底板    </td>
    <td width="4%" align="center" >只</td>
    <td width="6%" align="center" >剪折冲</td>
    <td width="4%" align="center" >6</td>
    <td width="10%" align="center" >2009年8月18日20时</td>
    <td width="10%" align="center" ></td>
    <td width="10%" align="center" ></td>
    <td width="15%" align="left" ></td>
  </tr>
  <tr onmousemove="this.bgColor='#FFFF99';" onmouseout="this.bgColor='#ffffff';">
    <td width="5%" align="center" >82683</td>
    <td width="18%" align="left" >漳州金龙客车有限公司<br>双内摆门泵总成-6745J13C中门</td>
    <td width="12%" align="left" >安装垫板    </td>
    <td width="4%" align="center" >块</td>
    <td width="6%" align="center" >剪折冲</td>
    <td width="4%" align="center" >12</td>
    <td width="10%" align="center" >2009年8月18日20时</td>
    <td width="10%" align="center" ></td>
    <td width="10%" align="center" ></td>
    <td width="15%" align="left" ></td>
  </tr>
  <tr onmousemove="this.bgColor='#FFFF99';" onmouseout="this.bgColor='#ffffff';">
    <td width="5%" align="center" >82683</td>
    <td width="18%" align="left" >漳州金龙客车有限公司<br>双内摆门泵总成-6745J13C中门</td>
    <td width="12%" align="left" >立柱    </td>
    <td width="4%" align="center" >根</td>
    <td width="6%" align="center" >抛光</td>
    <td width="4%" align="center" >6</td>
    <td width="10%" align="center" >2009年8月18日20时</td>
    <td width="10%" align="center" ></td>
    <td width="10%" align="center" ></td>
    <td width="15%" align="left" ></td>
  </tr>
  <tr onmousemove="this.bgColor='#FFFF99';" onmouseout="this.bgColor='#ffffff';">
    <td width="5%" align="center" >82683</td>
    <td width="18%" align="left" >漳州金龙客车有限公司<br>双内摆门泵总成-6745J13C中门</td>
    <td width="12%" align="left" >托盘    </td>
    <td width="4%" align="center" >块</td>
    <td width="6%" align="center" >喷塑</td>
    <td width="4%" align="center" >3</td>
    <td width="10%" align="center" >2009年8月18日20时</td>
    <td width="10%" align="center" ></td>
    <td width="10%" align="center" ></td>
    <td width="15%" align="left" ></td>
  </tr>
  <tr onmousemove="this.bgColor='#FFFF99';" onmouseout="this.bgColor='#ffffff';">
    <td width="5%" align="center" >82683</td>
    <td width="18%" align="left" >漳州金龙客车有限公司<br>双内摆门泵总成-6745J13C中门</td>
    <td width="12%" align="left" >滑道    </td>
    <td width="4%" align="center" >根</td>
    <td width="6%" align="center" >喷塑</td>
    <td width="4%" align="center" >3</td>
    <td width="10%" align="center" >2009年8月18日20时</td>
    <td width="10%" align="center" ></td>
    <td width="10%" align="center" ></td>
    <td width="15%" align="left" ></td>
  </tr>
  <tr onmousemove="this.bgColor='#FFFF99';" onmouseout="this.bgColor='#ffffff';">
    <td width="5%" align="center" >82683</td>
    <td width="18%" align="left" >漳州金龙客车有限公司<br>双内摆门泵总成-6745J13C中门</td>
    <td width="12%" align="left" >上摆臂    </td>
    <td width="4%" align="center" >只</td>
    <td width="6%" align="center" >喷塑</td>
    <td width="4%" align="center" >12</td>
    <td width="10%" align="center" >2009年8月18日20时</td>
    <td width="10%" align="center" ></td>
    <td width="10%" align="center" ></td>
    <td width="15%" align="left" ></td>
  </tr>
</tbody>
</table>
  • 大小: 201.7 KB
分享到：
| 精通Javascript+jquery的书中实例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery表格筛选功能

    在实现表格筛选功能时，我们会用到jQuery的选择器、事件处理和DOM操作等功能。 下面是一个基本的实现步骤： 1. **选择元素**：首先，我们需要选择表格和筛选输入框。例如，如果筛选输入框的ID是`searchInput`，...

    jquery表格筛选器.rar

    《jQuery表格筛选器详解及其应用》 在网页开发中，数据展示往往涉及到大量的表格内容，如何高效、便捷地对这些信息进行筛选，是提升用户体验的关键。"jQuery表格筛选器"便是一个为此目的而设计的工具，它使得用户...

    jQuery设置表格列字段筛选改变代码

    本文将深入探讨如何使用jQuery来实现表格列字段的筛选功能，并且会在改变筛选条件时实时更新表格内容。 首先，让我们理解HTML结构。在`index.html`文件中，通常会有一个表格（`&lt;table&gt;`）元素，包含表头（`&lt;thead&gt;`...

    基于jquery的表格筛选，排序，分页js

    一、jQuery表格筛选 表格筛选功能允许用户通过输入关键词快速查找表格中的特定数据。在jQuery中，可以使用`.filter()`方法配合文本匹配来实现。首先，获取到表格的行元素，然后根据用户输入的关键词过滤行，最后将...

    jquery表格排序和筛选表.rar

    在这个“jquery表格排序和筛选表.rar”压缩包中，我们重点关注的是如何利用jQuery来实现表格数据的排序和筛选功能，这对于前端开发来说是十分常见的需求。 首先，让我们了解表格排序。在网页中，表格（`&lt;table&gt;`...

    jquery表格排序和筛选表

    **表格筛选**： 1. **搜索框**：在表格上方添加一个输入框，用户可以输入关键词进行筛选。 2. **实时过滤**：监听输入框的`keyup`事件，当用户输入时实时更新表格，只显示匹配的行。 3. **多条件筛选**：允许用户...

    jQuery表格数据条件筛选代码

    本篇文章将详细讲解如何利用jQuery实现一个高效的表格数据条件筛选功能。 首先，jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理和Ajax交互，使得开发者能够更快速、更简洁地编写代码。在这个案例中...

    jQuery仿Excel表格排序筛选代码.zip

    《jQuery仿Excel表格排序筛选代码实现详解》 在网页开发中，模拟Excel表格的功能，如排序和筛选，能够极大地提高用户交互体验。本篇文章将详细解析"jQuery仿Excel表格排序筛选代码"，帮助开发者理解其背后的实现...

    jQuery bootstrap带分页表格数据搜索筛选代码

    本文将深入探讨如何使用 jQuery 和 Bootstrap 实现带分页的表格数据搜索和筛选功能。 首先，Bootstrap 提供了丰富的 CSS 样式和组件，包括表格（Table）样式，使得我们可以轻松创建出响应式的、美观的表格。而 ...

    jQuery表格数据条件筛选代码.zip

    《jQuery表格数据条件筛选代码详解》 在网页开发中，数据的展示与处理是一项重要的任务，尤其是当数据量较大时，如何高效地进行筛选和查询显得尤为重要。jQuery，作为一个轻量级的JavaScript库，提供了丰富的功能，...

    原创jQuery表格插件

    【原创jQuery表格插件】是一种基于JavaScript库jQuery开发的组件，旨在增强网页中的表格功能，使其具有更丰富的交互性和灵活性。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax...

    jquery 表格插件:Tablesorter 2.0 插件 表格用户体验内容筛选与分页筛选

    总结来说，Tablesorter 2.0 是一个功能强大、易于定制的 jQuery 表格插件，它通过排序、筛选和分页功能，极大地提升了用户在处理表格数据时的体验。无论是在大型项目还是小型网页中，Tablesorter 都能为数据展示带来...

    jQuery表格 可选择导出各种格式

    在"jQuery表格 可选择导出各种格式"这个主题中，我们将深入探讨如何利用jQuery来实现一个功能丰富的表格，其中包含数据导出到多种常见格式的功能。这通常涉及到前端数据展示与后端数据交互，以及文件格式转换的技术...

    jquery实现table表格样式，表格展开，表格内容筛选

    本文将深入探讨如何使用jQuery实现表格的样式美化、表格展开功能以及内容筛选，帮助开发者提升网页交互体验。 一、jQuery实现表格样式 1. **基本样式设置**：jQuery本身并不直接处理CSS样式，但它可以方便地操作...

    jquery表格插件Tablesorter插件 表格内容筛选与分页筛选

    Tablesorter是一款基于jQuery的开源表格排序插件，它提供了丰富的功能，如表格内容的排序、筛选和分页，极大地增强了HTML表格的交互性和用户体验。本文将深入探讨Tablesorter插件的核心特性以及如何实现表格内容筛选...

    jquery筛选并控制图片排序插件

    本文将详细探讨"jquery筛选并控制图片排序插件"这一主题，帮助开发者了解如何利用jQuery实现图片的筛选和排序功能，以增强网页的交互性和用户体验。 首先，jQuery提供了一套丰富的选择器，用于高效地选取DOM元素。...

    jQuery表格

    jQuery表格是一种基于JavaScript库jQuery开发的，用于在网页上展示数据的组件。它以其美观的界面、丰富的功能和易于使用的API赢得了广泛的应用。jQuery库以其简洁的语法和强大的DOM操作能力，为创建复杂的用户界面...

Magicbox
Global site tag (gtag.js) - Google Analytics