个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我希望获得一些有关 jQuery 的帮助，并且有兴趣了解问题的解决方案。基本上，我有一个 SharePoint 列表，其中包含同一个表的两个实例。 The table in black is the same table below just modified, I want the user to be able to click on the season "SS17" or "FW17" and filter the below table by the item they click on.
目前我使用CSS设置第二个表格显示:none;这是我用来在单击时切换表格的 jQuery。
$(document).ready(function(){
$(".ms-vb2").click(function(){
$('#scriptWPQ5').slideToggle("slow");
}); });
目前，它正在正常切换表格，其中“.ms-vb2”是黑色的顶部表格，“#scriptWPQ5”是正在切换的底部表格。我想更进一步，根据用户点击的“季节”进行过滤!
感谢您抽出时间，希望您能帮助我学习 jQuery 并理解表格:)如果我需要添加更多信息，请告诉我!
编辑 - 这是第一个表的 HTML，第一行“SS17”突出显示，另一行“FW17”以红色框出。 Table 1 HTML
我无法发布超过 2 个链接，但如果需要，我会删除第一个链接，以便发布第二个表的 HTML。不过，第二个表与表 1 HTML 相同。
最佳答案
尝试这个解决方案，
这允许您点击 table1 中的 TR，并触发 table2 中的行隐藏和显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.highlight{
background-color: yellow;
font-size:24px;
}
</style>
</head>
<body>
<table border="1" id="table1">
<tr>
<td>ss17</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>ss18</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>ss19</td>
<td>def</td>
<td>ghi</td>
</tr>
</table>
<br/>
<br/>
<br/>
<table border="1" id="table2">
<thead>
<tr>
<th>Season</th>
<th>Model</th>
<th>Model</th>
<th>Model</th>
<th>Model</th>
<th>Model</th>
<th>Model</th>
</tr>
</thead>
<tbody>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss17</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss18</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>ss19</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
</tbody>
</table>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$('#table2 tbody tr').hide();
$('#table1 tr').click(function () {
var trClickedValue = $(this).children('td:eq(0)').html();
$(this).attr('data',trClickedValue); // set ATTR
var dataValue = $(this).attr('data'); // get ATTR
$('#table2 tbody tr').each(function(){
var tr = $(this);
var tdValue = tr.children('td:eq(0)').html();
if(tdValue != dataValue)
{
tr.hide();
tr.removeClass('highlight');
}
else
{
tr.toggle();
tr.addClass('highlight');
}
})
})
</script>
</body>
</html>
关于javascript - 根据点击过滤 SharePoint(表) View - Jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33374827/
26
4
0
场景 网站页面有一个带有分页、过滤、排序功能的表格 View 。 表中的数据是从REST API服务器获取的，数据包含数百万条记录。 数据库 REST API 服务器 Web 服务器 浏览器 问
我有一个表student，其中的列dte_date(日期)具有值(2019-01-01、2019-02-01、2019-03-01)。 .等) 条件: dte_date 列中没有重复值。 但 dte_
我有一些逻辑可以根据不活动的用户创建通知。我正在获取具有以下属性的用户列表。我想做的只是在部门有非 Activity 用户时触发我的创建通知方法。因此，给出下面的列表，基本上会创建 1 个通知，表示部
使用 GPS 开发跟踪应用程序。一切都很好，但有时由于封闭区域或恶劣天气，我得到的分数不准确。当您绘制它们时，它看起来不对，有很多跃点/跳跃。 我应该运行什么算法来过滤掉不良信号对我来说，这看起来像是
我正在尝试按变量类型过滤对象数组。节点是一个具有位置的对象，但以不同的方式定义——作为点、矢量或附件。这是一个代码: class Joint { var position:Position
我想做的是在向量上创建一个过滤器，以便它删除未通过谓词测试的元素；但不太确定我该怎么做。 我根据谓词评估输入向量中的每个元素，例如在我的代码中，is_even 仿函数在 device_vector 向
我是 Gremlin 的新手，我正在使用 Gremlin 3.0.2 和 Stardog 5.0。我编写此查询是为了找出 schema.org 本体中两个实体之间的路径。以下是输出 - gremlin
考虑以下示例数据表， dt 30 的那一行需要去 - 或者如果其中两行 > 30相隔几秒钟，删除所有 3 个。然而 ，当我们有 4 行或更多行时，我们需要删除时间差 > 30 没有另一对 < 30
我正在考虑使用 ZeroMQ，并尝试了一些示例。但是，我无法验证 ZeroMQ 是否支持一些重要的要求。我希望你能帮助我。 我将使用这个简单的场景来问我的问题: 出版商(例如交易所)提供(大量)股票的
我需要从我的查询中过滤掉大量的对象。目前，它正在抓取类中的所有对象，我想将其过滤为查询字符串中的相关对象。我怎样才能做到这一点？当我尝试时，我收到一个属性错误说明 ''QuerySet' object
如何在 Prometheus 查询中添加标签过滤器？ kube_pod_info kube_pod_info{created_by_kind="ReplicaSet",created_by_name=
我有包含字符串的列的数据框，并希望过滤掉包含某些字符串以外的任何内容的所有行。考虑下面的简化示例: string % dplyr::filter(stringr::str_detect(string,
我有以下数据框，其中包含多行的角度变化值: 'data.frame': 712801 obs. of 4 variables: $ time_passed: int 1 2 3 4 5 6
我有一个 BehaviorSubject我希望能够filter ，但要保持新订阅者在订阅时始终获得一个值的行为主题式质量，即使最后发出的值被过滤掉。有没有一种简洁的方法可以使用 rxjs 的内置函数来
我有一个 RSS 提要，每天输出大约 100 篇文章。我希望过滤它以仅包含更受欢迎的链接，也许将其过滤到 50 个或更少。回到当天，我相信您可以使用“postrank”来做到这一点，但在谷歌收购后现已
我有这样一个重复的xml树- this is a sample xml file yellowred blue greyredblue 如您所见，每个项目可以具有不同数量的颜色标签
我以为我在 Haskell 学习中一帆风顺，直到... 我有一个 [[Int]] tiles = [[1,0,0] ,[0,1,0] ,[0,1,0]
我在使用 Knockout.js 过滤可观察数组时遇到问题 我的js: 包含数据的数组 var docListData = [ { name: "Article Name 1", info:
我在 mongoDB 中有这个架构: var CostSchema = new Schema({ item: String, value: Number }); var Attachm
给定一个数据框“foo”，我如何才能只选择“foo”中的那些行，例如foo$location =“那里”？ foo = data.frame(location = c("here", "there",
我是一名优秀的程序员,十分优秀！