Фильтр SharePoint (таблица) Просмотр на основе щелчка - JQuery

Я надеялся получить некоторую помощь с некоторыми 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.Фильтр SharePoint (таблица) Просмотр на основе щелчка - JQuery

В настоящее время я использовал CSS для установки второго отображения таблицы: none; и вот jQuery, который я использую для переключения таблицы при нажатии.

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

В настоящее время он переключая таблицы штраф, где».ms-Vb2" является столешница в черном, и где„# scriptWPQ5“в нижней таблице, которая в настоящее время переключается. Я хотел сделать еще один шаг и отфильтровать его на основе того, что нажал пользователь «Сезон»!

Спасибо за ваше время, и я надеюсь, что вы можете помочь мне изучить jQuery и понять таблицы :) Сообщите мне, если мне нужно добавить больше информации!

EDIT - вот HTML для первой таблицы, первая строка «SS17» выделена, а другая строка «FW17» выделена красным цветом. Table 1 HTML

У меня нет возможности разместить более 2-х ссылок, но при необходимости удалите первую ссылку, чтобы опубликовать HTML-таблицу второй таблицы. Вторая таблица идентична Таблице 1 HTML.

источник

2015-10-27 NicsWorld

Приведенное описание в порядке, но вам не помогут, если вы не предоставили достаточно кода здесь. Опубликуйте свои HTML/CSS и JQuery. Лучше, если вы можете создать аналогичную [** demo] (http://jsfiddle.net/) ** или предоставить ** Live Link **. – divy3993

Не достал тебя. Ссылка? ** Ссылка Live Link = Online, если у вас есть это на сервере. ** – divy3993

Извините, я не могу опубликовать более 2 ссылок, но добавил HTML для первой таблицы. Помогает ли это? – NicsWorld

Попробуйте это решение,

это позволяет нажать на TRs из table1 и запуска строк, чтобы скрыть и показать в 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>

источник

2015-10-27 21:09:59 Dave

Фильтр SharePoint (таблица) Просмотр на основе щелчка - JQuery

ответ

Смежные вопросы