Показать/скрыть значения td, которые соответствуют входному значению jquery

У меня есть html-таблица со столбцом состояния, которое может иметь текстовое значение «одобрено», «отклонено» и т. д. Я хочу сопоставить столбец состояния со входным значением из выбранного радиовхода. Для каждой строки, если текст в столбце состояния соответствует выбранному радиовходу, показать строку; в противном случае скрыть его. Например, если значение input[type = "radio"] равно «ПОЗДНО», отобразите все строки, чей статус td text равен «ПОЗДНО», и скройте другие строки.

 
       var val = $(".radio:checked").val();
                    $('.table tbody tr').each(function () {
                        var latevalues = $.trim($(this).find('td').eq(6).text()) === val;
                        if (latevalues === val) {
                            $(this).parent().toggle();
                        }           
                    });

 

<!-- begin snippet: js hide: false console: true babel: false -->

<div class = "row">
                <div class = "col-sm-2">                   
                    <!-- <form> -->
                    <div class = "radio">
                        <label>
                            <input type = "radio" name = "radio" class = "radio" id = "pending" value = "LATE" checked = "checked">
                            Pending(Default)
                        </label>
                    </div>
                    <div class = "radio">
                        <label>
                            <input type = "radio" name = "radio" class = "radio" id = "approve" value = "A">
                            Approved
                        </label>
                    </div>
                    <div class = "radio">
                        <label>
                            <input type = "radio" name = "radio" class = "radio" id = "Rejected" value = "R">
                            Rejected
                        </label>
                    </div>                                         
                </div>                
            </div>
            
            <table class = "table table-striped" style = "width: 100%; table-layout: fixed;">

 <thead>
        <tr>
            <th>Number</th>
            <th>Comments</th>           
            <th>Submit</th>
            <th>Occassionent</th>
            <th>Review</th>
            <th>Status</th>  -----> column to match values          
            <th>Admin</th>
            <th>By</th>
            <th>Date</th>
            <th>Managers Status</th>        
             
        </tr>
    </thead>
    <tbody> 
   <tr>
                <td>
                        <a href = "employees>
                            <span>49656</span>
                            <span> - </span>
                            <span> 24 May 2021</span>                           
                        </a>
                </td>

                <td>                    
                </td>

                <td>
                    <div> Due:</div>
                    <div> 24 May 2021</div>
                    <div> Act:</div>
                    <div> <b class = "danger">9 Apr 2023</b></div>
                </td>
                <td>
                </td>
                <td>
                    <div> Due:</div>
                    <div> 16 Apr 2023</div>
                    <div> Act:</div>
                    <div> <span>9 Apr 2023</span>
                    </div>
                </td>
                <td>
                    <div>&nbsp;</div>
                    <div>&nbsp;</div>
                    <div><b class = "success">LATE</b></div>---------->Status column Show this status if matches the input boxes
                </td>

                    <td>
                        <div>
                                <dl>
                                     
                                        <dd>Joe Anthony</dd>
                                </dl>
                        </div>
                    </td>
                    <td style = "width: 90px;">
                    </td>
                    <td style = "width: 80px;">
                    </td>
                    <td style = "width: 70px;">
                    </td>
            </tr>
            
           <tr>
                <td>
                        <a href = "employees>
                            <span>49656</span>
                            <span> - </span>
                            <span> 24 May 2021</span>                           
                        </a>
                </td>

                <td>                    
                </td>

                <td>
                    <div> Due:</div>
                    <div> 24 May 2021</div>
                    <div> Act:</div>
                    <div> <b class = "danger">9 Apr 2023</b></div>
                </td>
                <td>
                </td>
                <td>
                    <div> Due:</div>
                    <div> 16 Apr 2023</div>
                    <div> Act:</div>
                    <div> <span>9 Apr 2023</span>
                    </div>
                </td>
                <td>
                    <div>&nbsp;</div>
                    <div>&nbsp;</div>
                    <div><b class = "success">A</b></div>---------->Status column Show this status if matches the input boxes
                </td>

                    <td>
                        <div>
                                <dl>
                                     
                                        <dd>Joe Anthony</dd>
                                </dl>
                        </div>
                    </td>
                    <td style = "width: 90px;">
                    </td>
                    <td style = "width: 80px;">
                    </td>
                    <td style = "width: 70px;">
                    </td>
            </tr>
            
             <tr>
                <td>
                        <a href = "employees>
                            <span>49656</span>
                            <span> - </span>
                            <span> 24 May 2021</span>                           
                        </a>
                </td>

                <td>                    
                </td>

                <td>
                    <div> Due:</div>
                    <div> 24 May 2021</div>
                    <div> Act:</div>
                    <div> <b class = "danger">9 Apr 2023</b></div>
                </td>
                <td>
                </td>
                <td style = "width: 90px;">
                    <div> Due:</div>
                    <div> 16 Apr 2023</div>
                    <div> Act:</div>
                    <div> <span>9 Apr 2023</span>
                    </div>
                </td>
                <td>
                    <div>&nbsp;</div>
                    <div>&nbsp;</div>
                    <div><b class = "success">R</b></div>----------> Status column Show this status if matches the input boxes
                </td>

                    <td>
                        <div>
                                <dl>
                                     
                                        <dd>Mark Anthony</dd>
                                </dl>
                        </div>
                    </td>
                    <td style = "width: 90px;">
                    </td>
                    <td style = "width: 80px;">
                    </td>
                    <td style = "width: 70px;">
                    </td>
            </tr>

javascript html jquery

09.04.2023 23:14

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Во-первых, метод jQuery .eq отсчитывается от нуля, поэтому, чтобы получить шестой <td> в строке, вам нужно использовать .eq(5) (.eq(0) would get the first `).

Далее у вас есть дополнительное сравнение. Вы присваиваете переменной latevalues логический результат сравнения текста в каждом <td> на равенство с выбранным значением переключателя. Затем вы берете этот логический результат и сравниваете его с выбранным значением радио: if (latevalues === val). Это всегда будет возвращать false.

Кроме того, ваши значения радио имеют противоречивые регистры (прописные, строчные и т. д.). Я бы рекомендовал в нижнем регистре выбранное значение радио и текстовые значения, с которыми оно сравнивается, чтобы сделать сопоставление эффективным без учета регистра.

Исправленный код:

const updateState = () => {
  const filterStatus = ($(".radio:checked").val() || '').toLowerCase();

  $('.table tbody tr').each(function() {
    const rowStatus = ($.trim($(this).find('td').eq(5).text()) || '').toLowerCase();
    
    $(this).toggle(rowStatus === filterStatus);
  });
};

$('input[name = "radio"]').on('change', updateState);

updateState();

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "row">
  <div class = "col-sm-2">
    <!-- <form> -->
    <div class = "radio">
      <label>
        <input type = "radio" name = "radio" class = "radio" id = "pending" value = "LATE" checked = "checked">
        Pending(Default)
      </label>
    </div>
    <div class = "radio">
      <label>
        <input type = "radio" name = "radio" class = "radio" id = "approve" value = "A">
        Approved
      </label>
    </div>
    <div class = "radio">
      <label>
        <input type = "radio" name = "radio" class = "radio" id = "Rejected" value = "R">
        Rejected
      </label>
    </div>
  </div>
</div>

<table class = "table table-striped" style = "width: 100%; table-layout: fixed;">

  <thead>
    <tr>
      <th>Number</th>
      <th>Comments</th>
      <th>Submit</th>
      <th>Occassionent</th>
      <th>Review</th>
      <th>Status</th> -----> column to match values
      <th>Admin</th>
      <th>By</th>
      <th>Date</th>
      <th>Managers Status</th>

    </tr>
  </thead>
  <tbody>

    <tr>
      <td>
        <a href = "employees">
          <span>49656</span>
          <span> - </span>
          <span> 24 May 2021</span>
        </a>
      </td>

      <td>
      </td>

      <td>
        <div> Due:</div>
        <div> 24 May 2021</div>
        <div> Act:</div>
        <div> <b class = " danger">9 Apr 2023</b></div>
      </td>
      <td>
      </td>
      <td>
        <div> Due:</div>
        <div> 16 Apr 2023</div>
        <div> Act:</div>
        <div> <span>9 Apr 2023</span>
        </div>
      </td>
      <td>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div><b class = "success">A</b></div>
      </td>

      <td>
        <div>
          <dl>

            <dd>Joe Anthony</dd>
          </dl>
        </div>
      </td>
      <td style = "width: 90px;">
      </td>
      <td style = "width: 80px;">
      </td>
      <td style = "width: 70px;">
      </td>
    </tr>

    <tr>
      <td>
        <a href = "employees">
          <span>49656</span>
          <span> - </span>
          <span> 24 May 2021</span>
        </a>
      </td>

      <td>
      </td>

      <td>
        <div> Due:</div>
        <div> 24 May 2021</div>
        <div> Act:</div>
        <div> <b class = " danger">9 Apr 2023</b></div>
      </td>
      <td>
      </td>
      <td style = "width: 90px;">
        <div> Due:</div>
        <div> 16 Apr 2023</div>
        <div> Act:</div>
        <div> <span>9 Apr 2023</span>
        </div>
      </td>
      <td>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div><b class = "success">R</b></div>
      </td>

      <td>
        <div>
          <dl>

            <dd>Mark Anthony</dd>
          </dl>
        </div>
      </td>
      <td style = "width: 90px;">
      </td>
      <td style = "width: 80px;">
      </td>
      <td style = "width: 70px;">
      </td>
    </tr>
  </tbody>
</table>

Привет, я сделал ошибку и ответил на вопрос слишком быстро. $(это).toggle(rowStatus === filterStatus); показывает только заголовки <thead>. Фактические совпадающие строки не отображаются

— 10.04.2023 17:21

@edward678: Вы уверены, что у вас есть совпадающие строки? Фрагмент кода в моем ответе показывает совпадающие строки (хотя совпадений для состояния «Ожидание» нет). Если ваши фактические данные строки отличаются от того, что указано в вопросе, можете ли вы обновить то, что содержится в вопросе?

— 10.04.2023 17:23

Существует строка совпадения для ПОЗДНО и Утверждено. Поэтому, когда установлен флажок «Утверждено», я хочу показывать только утвержденное состояние.

— 10.04.2023 17:50

@ edward678: Я не вижу, чтобы слово «ПОЗДНО» отображалось где-либо в вашей таблице.

— 10.04.2023 17:54

Значение LATE соответствует состоянию ожидания.

— 10.04.2023 17:57

Дай мне минуту

— 10.04.2023 17:57

Я отредактировал код. pending(Default) — это просто метка для входного значения LATE, Approved — метка для A, а Rejected — метка для R.

— 10.04.2023 18:15

Вы используете метку как состояние или значение?

— 10.04.2023 18:15

@edward678: Все в порядке. Я обновил свой фрагмент, чтобы использовать «A» и «R» вместо «одобрено» и «отклонено».

— 10.04.2023 18:25

Спасибо. скоро сообщу о результатах

— 10.04.2023 18:52

Изменили ли вы что-нибудь в своем jquery, и у вас есть рабочий пример, которую я могу увидеть, потому что она все еще отображается только в заголовках?

— 10.04.2023 20:15

@ edward678: Я могу поместить его в скрипку, но это тот же код, что и в прикрепленном фрагменте кода. Ссылка на скрипку: jsfiddle.net/76484/cwvj4n1k

— 10.04.2023 20:30

@edward678: Нажмите на радиовходы, чтобы увидеть изменение отфильтрованных строк.

— 10.04.2023 20:41

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

— 10.04.2023 21:02

Я понимаю, почему это не работает на моем конце. Из-за ожидания

— 10.04.2023 21:04

Как получить незавершенную работу с LATE

— 10.04.2023 21:04

@ edward678: В столбце статуса должен быть текст «ПОЗДНО». Если вам нужна другая логика сопоставления, вам необходимо предоставить эту информацию.