可以筛选的tabledemo,基于jquery资源-CSDN文库

共6个文件

js：3个

html：1个

gif：1个

table

jquery

4星 · 超过85%的资源需积分: 13 65 浏览量 2012-09-24 10:10:50 上传评论 1 收藏 32KB RAR 举报

标题中的“可以筛选的table demo,基于jquery”指的是一个示例项目，该项目演示了如何在HTML表格中实现数据筛选功能，而这个功能是通过JavaScript库jQuery来实现的。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务，使得开发者能够更轻松地创建交互式网页。描述中提到，“打开文档直接有一个HTML页”，这意味着项目包含一个HTML文件，可能是index.html，用于展示和测试筛选功能。当在某些浏览器中打开时，可能会提示安装插件，这是因为某些功能可能依赖于特定的浏览器插件，例如Flash或Silverlight，以便在旧版本的浏览器上运行。不过，考虑到这是一款基于jQuery的解决方案，更可能的情况是需要一个支持jQuery的JavaScript运行环境，比如jQuery的polyfill插件，以便在不完全支持jQuery的浏览器中运行。 “JQUERY插件，注意安装一下”，这里指的是该项目可能包含一个jQuery插件，用于增强表格筛选功能。jQuery插件通常是扩展jQuery功能的小型JavaScript代码块，它们可以通过$.fn.extend()方法附加到jQuery的核心对象上。在本例中，这个插件可能是为了简化和定制表格数据的筛选过程。 “这样就可以实现表格的筛选功能了”，这意味着在用户界面中，用户将能够输入搜索条件，系统会实时过滤并显示符合这些条件的行。这通常涉及到监听用户输入，然后根据输入值更新表格的DOM结构，只显示匹配的行。关于标签“table筛选jquery”，我们可以推测这个项目主要关注两个方面： 1. **Table筛选**：在HTML表格中，筛选功能是指允许用户根据一列或多列的数据进行过滤，只显示满足特定条件的行。这在处理大量数据时非常有用，可以帮助用户快速定位到他们关心的信息。 2. **jQuery**：如前所述，jQuery是这个筛选功能实现的关键。它提供了便利的DOM操作接口，使得动态修改表格内容变得简单。此外，jQuery的事件处理机制使得实时响应用户输入成为可能。在压缩包的“筛选table”文件中，可能包含了以下内容： - HTML文件（如index.html）：展示带有筛选功能的表格。 - CSS文件（如styles.css）：定义表格的样式和布局。 - JavaScript文件（如script.js）：包含实现筛选功能的jQuery代码，可能还包括引用的jQuery库和插件。 - 可能还有其他辅助文件，如README.md（提供项目说明和使用指南），或者图片和其他资源文件。这个项目为开发者提供了一个使用jQuery实现表格筛选功能的示例，有助于学习和应用到自己的Web开发项目中。通过理解这个示例，开发者可以掌握如何利用jQuery处理DOM操作，如何编写自定义插件，以及如何实现动态数据过滤等功能。

资源推荐

资源详情

资源评论

收起资源包目录

筛选table.rar （6个子文件）

筛选table

flavorzoom.html 7KB

flavorzoom_files

FZ-Logo-4c-transparent-bg.gif 8KB

jquery.js 29KB

jquery_002.js 3KB

flavorzoom.css 22KB

my_food_plan_pick_foods.js 449B

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Check off the foods you want to eat today.</title> <link href="flavorzoom_files/flavorzoom.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="flavorzoom_files/jquery.js"></script> <script type="text/javascript" src="flavorzoom_files/my_food_plan_pick_foods.js"></script><script type="text/javascript" src="flavorzoom_files/jquery_002.js"></script></head><body> <div id="fz_header"> <table width="100%"><tbody><tr> <td> Thanks to <a href="http://www.flavorzoom.com/">flavorzoom.com</a> for providing a nice example </td> <td> <a href="http://www.flavorzoom.com/"><img src="flavorzoom_files/FZ-Logo-4c-transparent-bg.gif" alt="FlavorZoom"></a> </td> </tr> </tbody></table> </div> <div id="mainbody"> <pre>$(function() { var theTable = $('table.food_planner') theTable.find("tbody > tr").find("td:eq(1)").mousedown(function(){ $(this).prev().find(":checkbox").click() }); $("#filter").keyup(function() { $.uiTableFilter( theTable, this.value ); }) $('#filter-form').submit(function(){ theTable.find("tbody > tr:visible > td:eq(1)").mousedown(); return false; }).focus(); //Give focus to input field }); </pre> <h2>Check off the foods you want to eat today.</h2> <form id="filter-form">Filter: <input name="filter" id="filter" maxlength="30" size="30" type="text"></form><br> <table class="food_planner"><thead><tr><th colspan="2">Your Food List</th></tr><tr></tr></thead> <tbody><tr style="display: table-row;"> </tr><tr><td><input name="food_id_1" value="23558" checked="checked" id="" style="" type="checkbox"></td><td>      Beef, ground, 95% lean meat / 5% fat, patty, cooked, broiled<input name="food_source_row_1" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_2" value="18061" checked="checked" id="" style="" type="checkbox"></td><td>      Bread, rye, toasted<input name="food_source_row_2" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_3" value="11742" checked="checked" id="" style="" type="checkbox"></td><td>      Broccoli, cooked, boiled, drained, with salt<input name="food_source_row_3" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_4" value="1001" checked="checked" id="" style="" type="checkbox"></td><td>      Butter, salted<input name="food_source_row_4" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_5" value="6242" checked="checked" id="" style="" type="checkbox"></td><td>      CAMPBELL Soup Company, CAMPBELL'S CHUNKY Microwavable Bowls, Chicken and Dumplings Soup<input name="food_source_row_5" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_6" value="6396" id="" style="" type="checkbox"></td><td>      CAMPBELL Soup Company, CAMPBELL'S CHUNKY Soups, Fajita Chicken with Rice & Beans Soup<input name="food_source_row_6" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_7" value="11960" checked="checked" id="" style="" type="checkbox"></td><td>      Carrots, baby, raw<input name="food_source_row_7" value="USDA" type="hidden"></td></tr><tr style="display: table-row;"><td><input name="food_id_8" value="1040" checked="checked" id="" style="" type="checkbox"></td><td>      Cheese, swiss<input name="food_source_row_8" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_9" value="7933" checked="checked" id="" style="" type="checkbox"></td><td>      Chicken breast, oven-roasted, fat-free, sliced<input name="food_source_row_9" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_10" value="14209" checked="checked" id="" style="" type="checkbox"></td><td>      Coffee, brewed from grounds, prepared with tap water<input name="food_source_row_10" value="USDA" type="hidden"></td></tr><tr style="display: table-row;"><td><input name="food_id_11" value="1130" checked="checked" id="" style="" type="checkbox"></td><td>      Egg, whole, cooked, omelet<input name="food_source_row_11" value="USDA" type="hidden"></td></tr><tr style="display: table-row;"><td><input name="food_id_12" value="18265" checked="checked" id="" style="" type="checkbox"></td><td>      English muffins, wheat, toasted<input name="food_source_row_12" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_13" value="15092" id="" style="" type="checkbox"></td><td>      Fish, sea bass, mixed species, cooked, dry heat<input name="food_source_row_13" value="USDA" type="hidden"></td></tr><tr style="display: table-row;"><td><input name="food_id_14" value="18640" checked="checked" id="" style="" type="checkbox"></td><td>      HEINZ, WEIGHT WATCHER, Chocolate Eclair, frozen<input name="food_source_row_14" value="USDA" type="hidden"></td></tr><tr style="display: table-row;"><td><input name="food_id_15" value="42138" checked="checked" id="" style="" type="checkbox"></td><td>      Mayonnaise, reduced-calorie or diet, cholesterol-free<input name="food_source_row_15" value="USDA" type="hidden"></td></tr><tr style="display: table-row;"><td><input name="food_id_16" value="4053" id="" style="" type="checkbox"></td><td>      Oil, olive, salad or cooking<input name="food_source_row_16" value="USDA" type="hidden"></td></tr><tr style="display: table-row;"><td><input name="food_id_17" value="9203" checked="checked" id="" style="" type="checkbox"></td><td>      Oranges, raw, Florida<input name="food_source_row_17" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_18" value="20047" checked="checked" id="" style="" type="checkbox"></td><td>      Rice, white, long-grain, parboiled, enriched, cooked<input name="food_source_row_18" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_19" value="18350" checked="checked" id="" style="" type="checkbox"></td><td>      Rolls, hamburger or hotdog, plain<input name="food_source_row_19" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_20" value="14476" id="" style="" type="checkbox"></td><td>      Tea, ready-to-drink, LIPTON BRISK iced tea, with lemon flavor<input name="food_source_row_20" value="USDA" type="hidden"></td></tr></tbody></table><br><br> </div> </body></html>

评论收藏

内容反馈