CODEWITHSUNDEEP
javascriptfilter
neeraja sreelaxmi
neeraja sreelaxmi

Reputation: 57

How to filter a table using Values and Color using javascript

I have code which is used to filter table by Values ,

function myFunction() {
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

and here is my table

Table

this is script that generate table 

$(document).ready(function(){
 $('#load_data').click(function(){
  $.ajax({
   url:"OutputNew.csv",
   dataType:"text",
   success:function(data){
    var employee_data = data.split(/\r?\n|\r/);
    var table_data = '<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search Color"><table id="myTable" class="table table-bordered table-striped">';
    for(var count = 0; count<employee_data.length; count++) {
     var cell_data = employee_data[count].split(',');
     table_data += '<tr>';
     for(var cell_count=0; cell_count<cell_data.length; cell_count++){
      if(count === 0){
       table_data += '<th>'+cell_data[cell_count]+'</th>';
      }else{
          if(cell_data[cell_count] .includes("Not Matching")){
                var ret = cell_data[cell_count].replace('Not Matching','');
                if (ret == ""){
                  table_data += '<td>'+ret+'</td>'
                }else{
                  table_data += '<td><span class="badge-danger">'+ret+'</span></td>'
                }
          }else if(cell_data[cell_count] .includes("Matching")){
                var ret = cell_data[cell_count].replace('Matching','');
                if (ret == ""){
                  table_data += '<td>'+ret+'</td>'
                }else{
                  table_data += '<td><span class="badge-complete">'+ret+'</span></td>';
                }
          }else{
              table_data += '<td>'+cell_data[cell_count]+'</td>';
          }
      }
     }
     table_data += '</tr>';
    }
    table_data += '</table>';
    $('#employee_table').html(table_data);
   }
  });   
 }); 
});

CSS

div#loadbutton {
    margin-left: 158px;
}
h1#Heading {
    margin-left: 154px;
}
td { 
    border: 1px solid black; 
    word-wrap: break-word; 
} 
input#myInput {
    width: 343px;
    height: 49px;
    border-radius: 21px;
}
.table-responsive {
    min-height: .01%;
    overflow-x: auto;
    WIDTH: 223%;
    MARGIN-LEFT: -205PX;
}
.badge-Nill{
  display: inline-block;
    min-width: 49px;
    padding: 9px 9px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: blue;
    border-radius: 10px;
    width: 127px;
}
.badge-danger {
    display: inline-block;
    min-width: 49px;
    padding: 9px 9px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: red;
    border-radius: 10px;
    width: 127px;
    
}
th {
    text-align: left;
    width: 152px;
}
table {border-collapse:collapse; table-layout:fixed; width:310px;}
table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
.badge-complete {
    display: inline-block;
    min-width: 49px;
    padding: 9px 9px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: limegreen;
    border-radius: 10px;
    width: 127px;
}
div#employee_table {
    margin-left: 170px;
    margin-right: 70px;
}

so it filters values and here i want to filter table using both Value and color . For Example , if i type ABS and RED it should retrieve column that is of value ABS and Color Red . . Is there any way to do that ?

Upvotes: 2

Views: 1316

Answers (1)

ikiK
ikiK

Reputation: 6532

Btw, you could have also add sample data of you AJAX and that would make real Minimal, Reproducible Example , this way I will just make my won HTML table for example.

You are adding spans with class <span class="badge-danger"> and badge-complete into td so then just simply search for innerHTML not textContent or innerText of td's or whole tr for those class names.

In order to be able to search for "color", fetch input value and if it matches red, switch it to badge-danger and search for that. Same goes for green:

  if (filter === "RED") {
    filter = "badge-danger";
  } else if (filter === "GREEN") {
    filter = "badge-complete";
  }

This is how you search for columns, in example below this will search for first 3 columns:

  for (var i = 0; i < rows.length; i++) {
    var Col1 = rows[i].cells[0].innerHTML;
    var Col2 = rows[i].cells[1].innerHTML;
    var Col3 = rows[i].cells[2].innerHTML;
    if (Col1.indexOf(filter) > -1 ||
      Col2.indexOf(filter) > -1 ||
      Col3.indexOf(filter) > -1) {
      rows[i].style.display = "";
    } else {
      rows[i].style.display = "none";
    }
  }

So you will need to target last 4 columns judging from the picture you posted like this:

    for (var i = 0; i < rows.length; i++) {
    var Col1 = rows[i].cells[4].innerHTML;
    var Col2 = rows[i].cells[5].innerHTML;
    var Col3 = rows[i].cells[6].innerHTML;
    var Col4 = rows[i].cells[7].innerHTML;
    if (Col1.indexOf(filter) > -1 ||
      Col2.indexOf(filter) > -1 ||
      Col3.indexOf(filter) > -1 ||
      Col4.indexOf(filter) > -1 ) {
      rows[i].style.display = "";
    } else {
      rows[i].style.display = "none";
    }
  }

EXAMPLE ONLY COLOR:

function filterTable(event) {
  var filter = document.getElementById("myInput").value.toUpperCase();
  var rows = document.querySelector("#myTable tbody").rows;

  if (filter === "RED") {
    filter = "badge-danger";
  } else if (filter === "GREEN") {
    filter = "badge-complete";
  }

  for (var i = 0; i < rows.length; i++) {
    var Col1 = rows[i].cells[0].innerHTML;
    var Col2 = rows[i].cells[1].innerHTML;
    var Col3 = rows[i].cells[2].innerHTML;
    if (Col1.indexOf(filter) > -1 ||
      Col2.indexOf(filter) > -1 ||
      Col3.indexOf(filter) > -1) {
      rows[i].style.display = "";
    } else {
      rows[i].style.display = "none";
    }
  }
}

document.querySelector('#myInput').addEventListener('keyup', filterTable, false);
div#loadbutton {
  margin-left: 158px;
}

h1#Heading {
  margin-left: 154px;
}

td {
  border: 1px solid black;
  word-wrap: break-word;
}

input#myInput {
  width: 343px;
  height: 49px;
  border-radius: 21px;
}

.table-responsive {
  min-height: .01%;
  overflow-x: auto;
  WIDTH: 223%;
  MARGIN-LEFT: -205PX;
}

.badge-Nill {
  display: inline-block;
  min-width: 49px;
  padding: 9px 9px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: blue;
  border-radius: 10px;
  width: 127px;
}

.badge-danger {
  display: inline-block;
  min-width: 49px;
  padding: 9px 9px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: red;
  border-radius: 10px;
  width: 127px;
}

th {
  text-align: left;
  width: 152px;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 310px;
}

table td {
  border: solid 1px #fab;
  width: 100px;
  word-wrap: break-word;
}

.badge-complete {
  display: inline-block;
  min-width: 49px;
  padding: 9px 9px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: limegreen;
  border-radius: 10px;
  width: 127px;
}

div#employee_table {
  margin-left: 170px;
  margin-right: 70px;
}
<input type="text" id="myInput" name="myInput" onkeyup="filterTable()" placeholder="color"><br>

<table id="myTable">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="badge-danger">Jill</span></td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td><span class="badge-danger">94</span></td>
    </tr>
    <tr>
      <td>Adam</td>
      <td><span class="badge-danger">Johnson</span></td>
      <td>67</td>
    </tr>
    <tr>
      <td>Bo</td>
      <td><span class="badge-complete">Nilson</span></td>
      <td>35</td>
    </tr>
  </tbody>
</table>

COMBINED: To combine it its little more work:

When you search for name, it filters those names, but when you on top of that search for color, it will find all colors regardless of names, so you need to say to search only those rows who are not yet hidden:

if (tr[i].style.display !== "none") {
  tr[i].style.display = "";
}

You will also have to condition colors like this:

if (filter === "RED" || filter === "R" || filter === "RE") {
    filter = "badge-danger";
  }

because if you leave it with only word red, when you type latter r, it will hide all, and we have condition to search only not hidden, becausee only word red will translate into badge-danger. On text you don't need that. Or make a dropdown with color names...

This is to reset all when one input is emptied:

if (filter==="") {
document.getElementById("myInput").value="";
document.getElementById("myInputtext").value="";
[...document.querySelectorAll("#myTable tbody tr")].forEach(el => { el.style.display = "" });
}

EXAMPLE COMBINED: Search for adam or bo, green or red... 

function myFunction() {
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInputtext");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        if (tr[i].style.display !== "none") {
          tr[i].style.display = "";
        }
      } else {
        tr[i].style.display = "none";
      }
    }
  }
  
if (filter==="") {
document.getElementById("myInput").value="";
document.getElementById("myInputtext").value="";
[...document.querySelectorAll("#myTable tbody tr")].forEach(el => { el.style.display = "" });
}
}





function filterTable(event) {
  var filter = document.getElementById("myInput").value.toUpperCase();
  var rows = document.querySelector("#myTable tbody").rows;

  if (filter === "RED" || filter === "R" || filter === "RE") {
    filter = "badge-danger";
  } else if (filter === "GREEN" || filter === "G" || filter === "GR" || filter === "GRE" || filter === "GREE") {
    filter = "badge-complete";
  }

  for (var i = 0; i < rows.length; i++) {
    var Col1 = rows[i].cells[0].innerHTML;
    var Col2 = rows[i].cells[1].innerHTML;
    var Col3 = rows[i].cells[2].innerHTML;
    if (Col1.indexOf(filter) > -1 ||
      Col2.indexOf(filter) > -1 ||
      Col3.indexOf(filter) > -1) {
      if (rows[i].style.display !== "none") {
        rows[i].style.display = "";
      }
    } else {
      rows[i].style.display = "none";
    }
  }
if (filter==="") {
document.getElementById("myInput").value="";
document.getElementById("myInputtext").value="";
[...document.querySelectorAll("#myTable tbody tr")].forEach(el => { el.style.display = "" });
}    
}

document.querySelector('#myInputtext').addEventListener('keyup', myFunction, false);
document.querySelector('#myInput').addEventListener('keyup', filterTable, false);
div#loadbutton {
  margin-left: 158px;
}

h1#Heading {
  margin-left: 154px;
}

td {
  border: 1px solid black;
  word-wrap: break-word;
}

.table-responsive {
  min-height: .01%;
  overflow-x: auto;
  WIDTH: 223%;
  MARGIN-LEFT: -205PX;
}

.badge-Nill {
  display: inline-block;
  min-width: 49px;
  padding: 9px 9px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: blue;
  border-radius: 10px;
  width: 127px;
}

.badge-danger {
  display: inline-block;
  min-width: 49px;
  padding: 9px 9px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: red;
  border-radius: 10px;
  width: 127px;
}

th {
  text-align: left;
  width: 152px;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 310px;
}

table td {
  border: solid 1px #fab;
  width: 100px;
  word-wrap: break-word;
}

.badge-complete {
  display: inline-block;
  min-width: 49px;
  padding: 9px 9px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: limegreen;
  border-radius: 10px;
  width: 127px;
}

div#employee_table {
  margin-left: 170px;
  margin-right: 70px;
}
<input type="text" id="myInput" name="myInput" placeholder="color"><br>
<input type="text" id="myInputtext" name="myInput" placeholder="First Name"><br>

<table id="myTable">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="badge-danger">Jill</span></td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td><span class="badge-danger">94</span></td>
    </tr>
    <tr>
      <td>Adam</td>
      <td><span class="badge-danger">Johnson</span></td>
      <td>67</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td><span class="badge-complete">Johnson</span></td>
      <td>67</td>
    </tr>
    <tr>
      <td>Bo</td>
      <td><span class="badge-complete">Nilson</span></td>
      <td>35</td>
    </tr>
    <tr>
      <td>Bo</td>
      <td><span class="badge-danger">Nilson</span></td>
      <td>35</td>
    </tr>
  </tbody>
</table>

Reference on how to filter multiple columns, or whole rows.

Pretty sure there is room for improvement but I lost enough time on this, its enough for you to get it going and understand how to.

Upvotes: 1

Related Questions