Hide table row based on table cell pure Javascript-CodePudding

I have an form which add the input to an HTML table. I want to do a dropdown where the user can filter for specific table cell elements only in pure Javascript and a filter method.

Let's say I have an table like this:

Name	Age	ID
Anna	14	3
Herb	34	4
John	14	6

And a dropdown like this:

Select Name:
Anna
Herb
John

In the case the user selects Anna only the following table should showed:

Name	Age	ID
Anna	14	3

The tricky part is that every row is created through the input from an form what means that I can't talk to an specific table row per id or class.

Here is what I tried:

For the Javascript part I tried to get all the elements from the table cell which should contain the value from the select button and if this element is != the value from the select button I hide the table row. I don't know how to get the table row through a table cell element.

function changeDisplayTable() {
  //here i get all the values from the table cell departments in an array as text
  var dataCellsDepartments = document.getElementsByClassName(" dep"); //if does not work try " dep"
  var listWithTextContentDepartments = [];
  var i = 0;
  len = dataCellsDepartments.length;
  while (i < len) {
    listWithTextContentDepartments.push(dataCellsDepartments[i].textContent)
    i  
  }
  console.log(listWithTextContentDepartments);
  //array filtern und dann durch jede row gehen und checken if row contains one of the elem from array
  const result = listWithTextContentDepartments.filter(checkDepartment);

  function checkDepartment(department) {
    return department
  }

  //wenn selected elem != elem from table row --> hide table row

}

<table id="table" class="tableZebra" border="1">
  <tr>
    <th>Student_Id</th>
    <th>First_Name</th>
    <th>Last_Name</th>
    <th>DOB</th>
    <th>Gender</th>
    <th>Department</th>
    <th>Email_Id</th>
    <th>Joining Date</th>
  </tr>
</table>
<form>
  <p>*Staff_Id:</p>
  <div><input type="text" id="Staff_Id" placeholder="Staff_Id"></div>
  <p>*First_Name:</p>
  <div><input type="text" id="First_Name_staff" placeholder="First_Name"></div>
  <p>Last_Name:</p>
  <div><input type="text" id="Last_Name_staff" placeholder="Last_Name"></div>
  <p>DOB:</p>
  <div><input type="text" id="DOB_staff" placeholder="DOB"></div>
  <p>Gender:</p>
  <div><input type="radio" id="GenderFemale_staff" placeholder="Gender" name="test"></div>
  <label for="html">Female</label>
  <div><input type="radio" id="GenderMale_staff" placeholder="Gender" name="test"></div>
  <label for="html">Male</label>
  <p>*Email_Id:</p>
  <div><input type="text" id="Email_Id_staff" placeholder="Email_Id"></div>
  <div class="distance-submit"><input class="submit" type="submit" value="Submit" onclick="onClickCheckFormStaff()"></div>
  <div class="error-staff" id="error-staff">*Fill out all mandatory fields</div>
</form>
<p>*Department:</p>
<select name="departments" id="Departments">
  <option value="empty">------</option>
  <option value="Department_1">Department_1</option>
  <option value="Department_2">Department_2</option>
  <option value="Department_3">Department_3</option>
  <option value="Department_4">Department_4</option>
</select>

CodePudding user response：

You can get the table row from a cell using closest() :

var tableRow = tableCell.closest("tr");

Note that this method is not supported on internet explorer.

CodePudding user response：

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.

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

CodePudding user response：

more simple with .cells[ x ] row property

sample code:

const
  data = 
    [ { name: 'Anna', age:14, id: '6' }
    , { name: 'Herb', age:34, id: '4' }
    , { name: 'John', age:14, id: '6' }
    ]
, theSelect = document.querySelector('#my-select')
, tableBody = document.querySelector('#my-table tbody')
, myForm    = document.querySelector('#my-form')
  ;
  
theSelect.onchange = e =>  // ********** here it is ! **********
  {
  if (theSelect.value==='*')
    tableBody.querySelectorAll('tr').forEach(tr=>tr.className = '')
  else
    tableBody.querySelectorAll('tr').forEach(tr=>
      {
      tr.classList.toggle('noDisplay', tr.cells[0].textContent!==theSelect.value )
      })
  }
  
// just  adding code for testing...
function addRow(obj)
  {
  let nRow = tableBody.insertRow()
  nRow.insertCell().textContent = obj.name
  nRow.insertCell().textContent = obj.age
  nRow.insertCell().textContent = obj.id

  theSelect.add( new Option(obj.name,obj.name))
  }
data.forEach(addRow)

myForm.onsubmit = e =>
  {
  addRow( Object.fromEntries(new FormData(myForm).entries()))
  e.preventDefault()
  myForm.reset()
  theSelect.selectedIndex = 0
  tableBody.querySelectorAll('tr').forEach(tr=>tr.className='')
  }

html {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 14px;
  }
table  {
  border-collapse : collapse;
  margin          : 2em 1em;
  }
td  {
  padding    : .2em .8em;
  border     : 1px solid darkblue;
  }
thead { 
  background-color: #9bbad8;
}
form {
  padding     :  0 3em;
  }
label { 
  line-height : 2em;
  }
input {
  display       : block;
  margin-bottom : .6em;
  }
button { 
  margin-top : 1em;
  width      : 5em;
  }
.noDisplay {   /* display or not display, this is your question...*/
  display : none;
}

<select id="my-select">
  <option value="" disabled selected> Please pick one...</option>
  <option value="*"> All </option>
</select>
<table id="my-table">
  <thead>
    <tr><td>name</td><td>age</td><td>id</td></tr>
  </thead>
  <tbody></tbody>
</table>

<form id="my-form">
  <label >
    name
    <input type="text" name="name" value="" required>
  </label>
  <label >
    age
    <input type="number" name="age" value="" min="1" required>
  </label>
  <label >
    id
    <input type="text" name="id" value="" required>
  </label>
  <button type="submit">submit</button>
  <button type="reset">reset</button>
</form>