基于表格單元格的純Javascript隱藏表格行

我有一個將輸入添加到 HTML 表的表單。我想做一個下拉串列，用戶只能在純 Javascript 和過濾器方法中過濾特定的表格單元格元素。

假設我有一張這樣的表：

和這樣的下拉選單：

選擇姓名：
安娜·
赫伯
·約翰

在用戶選擇 Anna 的情況下，僅應顯示下表：

棘手的部分是每一行都是通過表單的輸入創建的，這意味著我無法與每個 id 或類的特定表行交談。

這是我嘗試過的：

對于 Javascript 部分，我嘗試從表格單元格中獲取所有元素，這些元素應該包含來自選擇按鈕的值，如果該元素是 != 來自選擇按鈕的值，我將隱藏表格行。我不知道如何通過表格單元格元素獲取表格行。

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>

uj5u.com熱心網友回復：

您可以使用closest()以下方法從單元格中獲取表格行：

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

請注意，Internet Explorer不支持此方法。

uj5u.com熱心網友回復：

據我所知，您想根據部門進行過濾，并嘗試根據所選部門顯示資料。

在這里，您需要做的是將資料存盤在一個變數中，并根據另一個變數呈現表格，該變數在選擇過濾器資訊時發生變化。

例如：-

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

使用另一個變數來填充表資料，比如“studentTableData”

現在處于未應用過濾器的默認條件下

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

標籤：javascript html

上一篇：如何只調整陣列的一部分，而其他部分保持不變？

下一篇：使用值將陣列中物件的屬性合并在一起并洗掉重復項