How to filter li in a table using js?-CodePudding

How to filter li in a table using js? want to filter the 6th column which is courses and I am only able to filter with the column having only one value. SO how can I filter with all the li of this.

want to filter the 6th column which is courses and I am only able to filter with the column having only one value. SO how can I filter with all the li of this.

$('#courses').change(function() {

  var selection = $(this).val();
  var dataset = $('.student-details-table').find('tr');

  dataset.show();

  dataset.filter(function(index, item) {
    return $(item).find('td:nth-child(6) ul#student-details-ul li').text().split(',').indexOf(selection) == -1;
  }).hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="" id="courses" >
  <option >Courses</option>
  <option value="Derivative Analysis">Derivative Analysis</option>
  <option value="Technical Analysis">Technical Analysis</option>
  <option value="Algo Basics">Algo Basics</option>
  <option value="Algo Advance">Algo Advance</option>
</select>


<table >
  <tr >
    <th>S.no.</th>
    <th>Profile</th>
    <th>Name</th>
    <th>Email</th>
    <th>Contact</th>
    <th>Courses</th>
    <th>Progress</th>
  </tr>
  <tbody >
    <% courses.forEach(function(course) { %>
      <tr>
        <td>1</td>
        <td>
          <% if(course.student_filename) { %>
            <img src="../uploads/" <%- course.student_profile %> alt="profile-img" width="40px">
            <% } else { %>
              <img src="../images/profile.png" alt="profile-img" width="40px">
              <% } %>
        </td>
        <td>
          <%- course.student_name %>
        </td>
        <td>
          <%- course.email %>
        </td>
        <td>
          <%- course.student_contact %>
        </td>
        <td>
          <ul style="list-style: none;" id="student-details-ul">
            <% course.courses.forEach(function(obtainedCourse) { %>
              <li id="student-details-limport { originalName as alias } from 'module';">
                <%- obtainedCourse.course %>
              </li>
              <% }) %>
          </ul>
        </td>
        <td>20%</td>
      </tr>
      <% }) %>
  </tbody>
</table>

CodePudding user response：

You have to use class instead of id for "student-details-ul" as it is supposed to be unique and it will always take the first one if there is more than one element having the same id. So you have to use a class instead:

<ul style="list-style: none;" >

and you have to change the selector to query the class as follow in the js part.(the "#" in your code was changed to ".") to query the class;

dataset.filter(function (index, item) {
    return $(item).find('td:nth-child(6) ul.student-details-ul li').text().split(',').indexOf(selection) == -1; }).hide();
});

CodePudding user response：

It seems like you want to show the current selected element only. There is a better way: Attach a selectable identifier for each list items, just like id, or data-id these attributes. Then you can hide all of list items first, and find the element which needs to be shown directly by jQuery selector.

For your code, the repeated elements should never use id attributes. or else, you can just catch the first.