Javascript 基于click-Jquery筛选SharePoint（表）视图_Javascript_Jquery_Css_Sharepoint

Javascript 基于click-Jquery筛选SharePoint（表）视图

javascript jquery css sharepoint

Javascript 基于click-Jquery筛选SharePoint（表）视图,javascript,jquery,css,sharepoint,Javascript,Jquery,Css,Sharepoint,我希望在jQuery方面得到一些帮助，并且对理解问题的解决方案感兴趣。基本上，我有一个SharePoint列表，其中包含同一个表的两个实例。目前我使用CSS设置第二个表显示：无；下面是我用来在单击时切换表的jQuery $(document).ready(function(){ $(".ms-vb2").click(function(){ $('#scriptWPQ5').slideToggle("slow"); }); }); 目前，它正在对表格进行精细切换，其中“.ms-vb

我希望在jQuery方面得到一些帮助，并且对理解问题的解决方案感兴趣。基本上，我有一个SharePoint列表，其中包含同一个表的两个实例。

目前我使用CSS设置第二个表显示：无；下面是我用来在单击时切换表的jQuery

$(document).ready(function(){
$(".ms-vb2").click(function(){
    $('#scriptWPQ5').slideToggle("slow");
}); });

目前，它正在对表格进行精细切换，其中“.ms-vb2”是顶部的黑色表格，而“#scriptWPQ5”是正在进行切换的底部表格。我想更进一步，根据用户点击的“季节”对其进行过滤

感谢您抽出时间，我希望您能帮助我学习jQuery并理解表：）如果我需要添加更多信息，请告诉我

编辑-这里是第一个表格的HTML，第一行“SS17”突出显示，另一行“FW17”以红色勾勒。

我没有能力发布超过2个链接，但如果需要，我会删除第一个链接，以便发布第二个表的HTML。第二个表与表1的HTML相同。

试试这个解决方案

这允许您单击表1中的TRs，并触发表2中隐藏和显示的行

<!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>