How to Hide Table Row Overflow

$(document).on('click', '.hide_row', function() {
  $(this).closest('tr').hide()
})

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.hide_row {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    <th></th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td><button type="button" class="hide_row">Hide</button></td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    <td><button type="button" class="hide_row">Hide</button></td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
    <td><button type="button" class="hide_row">Hide</button></td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
    <td><button type="button" class="hide_row">Hide</button></td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
    <td><button type="button" class="hide_row">Hide</button></td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
    <td><button type="button" class="hide_row">Hide</button></td>
  </tr>
</table>

Hide table row based on table cell pure Javascript

From what I can see, you want to filter based on department and you're trying to display the data based on the selected department.

Here what you need to do is keep your data stored in a variable and render the table based on another variable which changes when the filter information is selected.

If you're going for a simple approach then use a file(json, csv, text, xlsx) of you choice. Write a function to read the file and save the info in "var data". Everytime while submitting a form, add it to your file by writing another write function. Also, call the read function after the write is done so that "var data" has the updated data with the newly added information

If you're using csv file the jQuery-CSV library has a function called $.csv.toObjects(csv) that does the mapping automatically.

File is save in the below format
heading1,heading2,heading3,heading4,heading5
value1_1,value2_1,value3_1,value4_1,value5_1
value1_2,value2_2,value3_2,value4_2,value5_2

To read the file use this
var data = $.csv.toObjects(csv):

The output would look like the data below in the "var data"
For example:-

var data = [
   {Student_Id : 123
    First_Name: John
    Last_Name: doe
    ...
    Department: ABC
    ...}
    {Student_Id :3456
    First_Name:Jane 
    Last_Name: Doe
    .....
    Department:DEF
    ....}
]

Use another variable for populating the table data say "studentTableData"

Now in default condition when no filter is applied do

var studentTableData = data

When a filter is selected instead of hiding the table rows,filter the data of "studentTableData" based on the selected department and render the table again(in simpler words replace the table)

var department_selected = "ABC"

var studentTableData = data.filter(function(el){
return el.Department == department_selected 
})
//var studentTableData will now have an array of data where department name matches the selected name

Related Topics