Загрузить таблицу HTML в шаблон PUG на основе выпадающего списка - PullRequest
Новая
       25

Загрузить таблицу HTML в шаблон PUG на основе выпадающего списка

0 голосов
/ 09 мая 2018

tl; dr: Чтобы дать четкое и краткое представление о том, что я хочу, когда пользователь выбирает состояние из выпадающего списка выбора, я хочу, чтобы в таблице отображались только местоположения, относящиеся к этому состоянию. При загрузке страницы пользователи будут просматривать всю таблицу. Тогда я хочу иметь возможность фильтровать представление на основе выпадающего списка. Я надеюсь это имеет смысл. У меня есть функция, написанная на jquery, но она не выполняет то, что я ожидал

У меня есть список из состояний в раскрывающемся списке, например: 

select#states(form='addProperty', name='propertyType') 
      option(value='0') -- Select A State --
      option(value='AL') Alabama
      option(value='AK') Alaska
      option(value='AZ') Arizona
      option(value='AR') Arkansas 
      option(value='CA') California
      option(value='CO') Colorado
      option(value='CT') Connecticut
      option(value='DE') Delaware
      option(value='FL') Florida

У меня также есть таблица, которая выглядит так: Пример таблицы

Я написал эту таблицу в шаблоне pug примерно так: 

table.table
    tr 
        th State
        th Description 
        th SMS ID Name
            for item in lists
                tr
                    td.state #{item.state}
                    td #{item.name}
                    td #{item.location}

У меня есть эта jquery функция: 

$("#states").on("change",
    function(){
        var a = $(this).find("option:selected").val();
        console.log(a);
        $("table tr td").each(
            function(){
                if($(this).html() != a){
                    $(this).hide();
                }
                else{
                    $(this).show();
                }
        });
});

Эта функция скрывает все, кроме столбца «Состояние». Например:

функция поведения

Я знаю, что моя функция закодирована, чтобы скрыть все, что не имеет значения .html, соответствующего моему выбору, но я не могу понять, как скрыть целые строки, которые не соответствуют моему выбору

Я новичок, поэтому, пожалуйста, успокойтесь:)

1 Ответ

0 голосов
/ 14 мая 2018

Я смог решить свою проблему после того, как в основном использовал этот пост для отладки резиновой утки.

Для всех, кому интересно, вот мое рабочее решение. 

table.table
    th State
    th Description 
    th SMS ID Name
        for item in lists
            tr(class=item.state)
                td.state #{item.state}
                td.name #{item.name}
                td.loc #{item.location}
                script.
                    var dropdown = document.getElementById("states");
                    dropdown.onchange = function({{console.log(dropdown.value);}};
                        $("#states").on("change",
                        function(){
                          var option = $(this).find("option:selected").val();
                          $("tr").each(
                            function(){
                              if($(this).hasClass(option)){
                                console.log(this);
                                $(this).show();
                              }
                              else{
                                $(this).hide();
                              }
                            });
                        });

Решениебыло довольно просто в конце.Мне пришлось динамически назначать класс для каждой строки.Я сделал это с tr(class=item.state).Оттуда я повторял каждый tr и проверял класс, который соответствует моему выбору в выпадающем списке.

Мое сообщение было просмотрено более 47 раз и не получило ответа, так что, надеюсь, это сообщение может кому-то помочь.

...