Question

我希望得到一些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");
}); });

目前正在切换表格，其中＆＃34; .ms-vb2＆＃34;是黑色的顶级桌子，＆＃39;＃scriptWPQ5＆＃39;是正在切换的底部表格。我想更进一步，根据＆＃34; Season＆＃34;用户点击了！

感谢您的时间，我希望您能帮助我学习jQuery并理解表格:) 如果我需要添加更多信息，请告诉我们！

编辑 - 这是第一个表的HTML，第一行＆＃34; SS17＆＃34;突出显示，另一行＆＃34; FW17＆＃34;用红色标出。 Table 1 HTML

我无法发布超过2个链接，但如果需要，将删除第一个链接，以便发布第二个表的HTML。第二个表与表1 HTML相同。

Answer 1

试试这个解决方案，

这允许您从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>

根据Click - Jquery过滤SharePoint（表）视图

1 个答案: