test task multi-filtering table

Learn how to create test task multi-filtering table using html, css and/or js.

<br><h2>Testing Task List Filters</h2><hr><br>

<div class="container">
  <div class="row">
    
      <table class="table">
        <thead>
          <tr class="filters">
            <th>Assigned User
              <select id="assigned-user-filter" class="form-control">
                <option>None</option>
                <option>John</option>
                <option>Rob</option>
                <option>Larry</option>
                <option>Donald</option>
                <option>Roger</option>
              </select>
            </th>
            <th>Status
              <select id="status-filter" class="form-control">
                <option>Any</option>
                <option>Not Started</option>
                <option>In Progress</option>
                <option>Completed</option>
              </select>
            </th>
            <th>Milestone
              <select id="milestone-filter" class="form-control">
                <option>None</option>
                <option>Milestone 1</option>
                <option>Milestone 2</option>
                <option>Milestone 3</option>
              </select>
            </th>
            <th>Priority
              <select id="priority-filter" class="form-control">
                <option>Any</option>
                <option>Low</option>
                <option>Medium</option>
                <option>High</option>
                <option>Urgent</option>
              </select>
            </th>
            <th>Tags
              <select id="tags-filter" class="form-control">
                <option>None</option>
                <option>Tag 1</option>
                <option>Tag 2</option>
                <option>Tag 3</option>
              </select>
            </th>
          </tr>
        </thead>
      </table>
    
    
    <div class="panel panel-primary filterable">
      <div class="panel-heading">
        <h3 class="panel-title">Tasks</h3>
        <div class="pull-right"></div>
      </div>

<table id="task-list-tbl" class="table">
        <thead>
          <tr>
            <th>Title</th>
            <th>Created</th>
            <th>Due Date</th>
            <th>Priority</th>
            <th>Milestone</th>
            <th>Assigned User</th>
            <th>Tags</th>
          </tr>
        </thead>
        
        <tbody>
          
          <tr id="task-1"
              class="task-list-row" 
              data-task-id="1"
              data-assigned-user="Larry"
              data-status="In Progress"
              data-milestone="Milestone 2"
              data-priority="Urgent"
              data-tags="Tag 2">
            <td>Task title 1</td>
            <td>01/24/2015</td>
            <td>09/24/2015</td>
            <td>Urgent</td>
            <td>Milestone 2</td>
            <td>Larry</td>
            <td>Tag 2</td>
          </tr>
          
          <tr id="task-2"
              class="task-list-row" 
              data-task-id="2"
              data-assigned-user="Larry"
              data-status="Not Started"
              data-milestone="Milestone 2"
              data-priority="Low"
              data-tags="Tag 1">
            <td>Task title 2</td>
            <td>03/14/2015</td>
            <td>09/18/2015</td>
            <td>Low</td>
            <td>Milestone 2</td>
            <td>Larry</td>
            <td>Tag 1</td>
          </tr>
          
          <tr id="task-3"
              class="task-list-row" 
              data-task-id="3"
              data-assigned-user="Donald"
              data-status="Not Started"
              data-milestone="Milestone 1"
              data-priority="Low"
              data-tags="Tag 3">
            <td>Task title 3</td>
            <td>11/16/2014</td>
            <td>02/29/2015</td>
            <td>Low</td>
            <td>Milestone 1</td>
            <td>Donald</td>
            <td>Tag 3</td>
          </tr>
          
          
          <tr id="task-4"
              class="task-list-row" 
              data-task-id="4"
              data-assigned-user="Donald"
              data-status="Completed"
              data-milestone="Milestone 1"
              data-priority="High"
              data-tags="Tag 1">
            <td>Task title 4</td>
            <td>11/16/2014</td>
            <td>02/29/2015</td>
            <td>High</td>
            <td>Milestone 1</td>
            <td>Donald</td>
            <td>Tag 1</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<style>
.filterable {
  margin-top: 15px;
}
.filterable .panel-heading .pull-right {
  margin-top: -20px;
}
.filterable .filters input[disabled] {
  background-color: transparent;
  border: none;
  cursor: auto;
  box-shadow: none;
  padding: 0;
  height: auto;
}
.filterable .filters input[disabled]::-webkit-input-placeholder {
  color: #333;
}
.filterable .filters input[disabled]::-moz-placeholder {
  color: #333;
}
.filterable .filters input[disabled]:-ms-input-placeholder {
  color: #333;
}

</style>

function updateFilters() {
  $('.task-list-row').hide().filter(function() {
    var
      self = $(this),
      result = true; // not guilty until proven guilty

if (userFilter && (userFilter != 'None')) {
      result = result && userFilter === self.data('assigned-user');
    }
    if (statusFilter && (statusFilter != 'Any')) {
      result = result && statusFilter === self.data('status');
    }
    if (milestoneFilter && (milestoneFilter != 'None')) {
      result = result && milestoneFilter === self.data('milestone');
    }
    if (priorityFilter && (priorityFilter != 'None')) {
      result = result && priorityFilter === self.data('priority');
    }
    if (tagsFilter && (tagsFilter != 'None')) {
      result = result && tagsFilter === self.data('tags');
    }
    
    return result;
  }).show();
}

// Assigned User Dropdown Filter
$('#assigned-user-filter').on('change', function() {
  userFilter = this.value;
  updateFilters();
});

// Task Status Dropdown Filter
$('#status-filter').on('change', function() {
  statusFilter = this.value;
  updateFilters();
});

// Task Milestone Dropdown Filter
$('#milestone-filter').on('change', function() {
  milestoneFilter = this.value;
  updateFilters();
});

// Task Priority Dropdown Filter
$('#priority-filter').on('change', function() {
  priorityFilter = this.value;
  updateFilters();
});

// Task Tags Dropdown Filter
$('#tags-filter').on('change', function() {
  tagsFilter = this.value;
  updateFilters();
});

/*
future use for a text input filter
$('#search').on('click', function() {
    $('.box').hide().filter(function() {
        return $(this).data('order-number') == $('#search-criteria').val().trim();
    }).show();
});*/
</script>

test task multi-filtering table

Random HTML Example Codes: