项目中有个地方,一个页面显示两种商品,显示商品参数的时候有可以两种商品的参数数目不一致,这就导致了一边长一边短的,现在要做成如下图所示的:
一开始的时候先隐藏一部分参数,点击按钮后显示余下的参数,自己想了一下,基本思路是:页面进入时跟以前一样把商品参数全都取出来,然后利用jquery选择表格,把表格中行数>3的进行隐藏,点击按钮后再把表格中隐藏的行显示出来。
显示隐藏行都好做,主要就是筛选表格的某行以前没做过,自己实验了一下,得如下jquery代码:
$("table.param").each(function() {
$(this).find("tr").filter(function(index) {
return index > 3;
}).css("backgroundColor", "#f00");
});
给要隐藏的表格加上一个param的class,方便在JS中选择,然后通过each对找到的每个表格依次进行each中的操作,重点就是filter这个jquery的筛选方法了,相信大家看了代码后都应该大概或许懂得啥回事了,index就是索引,从0开始,以上代码就是选择表格的第4行以后的行,让行的背景色变为红色!!!
记得之前得先引入JQUERY的内裤。
分享到:
相关推荐
5. **筛选功能**:如果需要对特定列进行筛选,可以利用 DataTables 的 `column().search()` 方法。例如,当用户选择一个下拉菜单选项时,根据选项值筛选指定列的数据。 6. **分页**:DataTables 自动处理分页,只需...
表格筛选功能允许用户通过输入关键词快速查找表格中的特定数据。在jQuery中,可以使用`.filter()`方法配合文本匹配来实现。首先,获取到表格的行元素,然后根据用户输入的关键词过滤行,最后将匹配的行显示出来,...
2. **预处理和后处理**:在数据加载到表格之前或从表格中移除之后,开发者可以使用预处理和后处理函数来格式化数据、添加额外信息或执行其他操作。 3. **插件集成**:Tablesorter 具有良好的可扩展性,可以与其他 ...
Tablesorter是一款基于jQuery的开源表格排序插件,它提供了丰富的功能,如表格内容的排序、筛选和分页,极大地增强了HTML表格的交互性和用户体验。本文将深入探讨Tablesorter插件的核心特性以及如何实现表格内容筛选...
dataTables允许用户根据表格中的数据进行实时搜索,这对于大量数据的筛选非常有用。用户只需在全局搜索框中输入关键词,插件就能即时更新显示结果。此外,高级过滤选项可能包括列过滤,允许用户针对特定列进行更精确...
过滤功能是另一个重要的特性,它允许用户根据特定条件筛选表格中的数据。这可能包括文本输入框、下拉菜单等过滤控件,用户可以根据需要对数据进行实时筛选。 在"office_blue"这个文件名中,我们可以推测这是一个...
"简单的带排序和过滤功能的jQuery表格插件",即smart-table,就是这样一个工具,它让网页中的表格管理变得更加高效和直观。 Smart-table是一款轻量级的jQuery插件,其主要目标是为开发者提供一个快速创建带有排序、...
jQuery的dataTable插件提供了一种高效、灵活且功能丰富的解决方案,使得网页上的表格操作变得更为便捷。这个插件不仅支持基本的排序、搜索和分页,还提供了自定义样式、数据过滤、行选择等多种高级功能,极大地提高...
数据筛选功能允许用户根据特定条件过滤表格中的行,以显示符合要求的信息。在Bootstrap的动态表格模板中,这通常通过输入框实现,用户可以在输入框中输入关键词,系统会实时更新表格,只显示包含该关键词的行。这种...
**SmartTable:jQuery插件实现高效表格操作** 在网页开发中,展示大量数据时,表格是一种常见的选择。SmartTable是一款强大的jQuery插件,专为快速构建具有排序、过滤和分页功能的表格而设计。这款插件以简洁的API...
在jQuery分页表格中,动态数据可能来源于Ajax请求,当用户切换页面或者进行其他操作时,插件会向服务器发送请求,获取对应页面的数据,并实时更新表格内容,无需刷新整个页面。 “数据表格”是组织和展示结构化数据...
总结来说,`jQuery Bootgrid` 是前端开发中的利器,它结合了 jQuery 的易用性和 Bootstrap 的优雅设计,为开发者提供了强大而灵活的表格解决方案。无论是在数据展示、交互还是定制性上,Bootgrid 都能帮助开发者提升...
jQuery jqGrid是一款基于jQuery的开源网格插件,用于在网页上展示和操作表格数据。它提供了丰富的功能,如数据分页、排序、过滤、编辑、添加、删除等,是Web开发中处理动态表格数据的强大工具。jqGrid 3.5是该插件的...
在本文中,我们将深入探讨jQuery DataTable插件,它是一个强大的数据展示工具,广泛用于Web开发中的表格操作。标题“Jquery dataTable完整例子(取数据、分页、样式等)”和描述表明,我们将讨论如何利用这个插件...
7. **事件处理**:jqGrid提供了丰富的事件回调,如`loadComplete`、`beforeSelectRow`等,允许开发者在特定操作后执行自定义代码。 8. **编辑功能**:jqGrid支持行内编辑、弹出式编辑和添加、删除记录。这涉及到`...
2. **动态过滤**:tablesorter提供文本输入框,用户可以通过输入关键词实时筛选表格中的行,快速定位所需信息。 3. **分页功能**:对于大型表格,tablesorter通过分页组件将数据分割成多个小页面,减少一次性加载的...
此外,还可以通过`search`选项全局搜索数据,或者使用`column().search()`方法对特定列进行过滤。 **5. 样式与定制** `DataTables` 提供多种预设样式,如'Bootstrap','Foundation','PrimeUI'等,以适应不同的前端...
4. **过滤**:内置的过滤工具允许用户根据特定条件筛选数据。 5. **编辑**:行内编辑和弹出式编辑模式,支持新增、修改和删除数据。 6. **导出**:能够将表格数据导出为 CSV、Excel 或 PDF 格式。 7. **响应式设计**...
jqGrid 是一个强大的 jQuery 插件,用于创建交互式的表格,展示了典型的B/S架构的数据管理。这个插件允许用户在客户端以美观的方式显示和操作来自服务器的数据,同时也能将客户端的更改反馈给服务器。在jqGrid 3.6...
用户可以通过输入框实时筛选表格中的数据,这在处理大量数据时非常实用。例如,添加一个搜索框并绑定事件: ```html ``` ```javascript $("#searchInput").on("keyup", function() { var value = $(this).val()....