如何突出显示表格列？

Question

在我的表格中，我有学生，全名，性别，课程和主题。我用combobox搜索表中的所有“男性”或“女性”。例如，我选择'男性'我希望所有的男性专栏或细胞都会以任何颜色突出显示。只会突出显示“SEX”列。我怎么能在javascript上做到这一点？

function searchForSex() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("txtSearch");
  filter = input.value.toUpperCase();
  table = document.getElementById("tblStudent");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[2];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.backgroundColor = "red";
      }
    }
  }
}

Search:
<select id="txtSearch"><br><br>
  <option value="Male">Male</option>
  <option value="Female">Female</option>
</select><br><br>
<button onclick="searchForSex()">Search</button><br><br> ID:
<br>
<input type="text" id="txtProdName"><br><br> FULL Name:<br>
<input type="text" id="txtProdName"><br><br> SEX:
<br>
<select id="cboSex">
  <option value="Male">Male</option>
  <option value="Female">Female</option>
</select><br><br> COURSE:
<br>
<input type="text" id="txtCourse"><br><br> SUBJECT:
<br>
<input type="text" id="txtSubject"><br><br>

<button onclick="insertValueTable()">Save</button>
<button>Cancel</button>
<br><br>
<table border="1px">
  <th>ID</th>
  <th>FULL NAME</th>
  <th>SEX</th>
  <th>COURSE</th>
  <th>SUBJECT</th>

  <tbody id="tblStudent">

  </tbody>
</table>

Answer 1

例如，你可以这样做。

而另一方面：searchForSex是一个非常有趣的函数名称。

function searchForSex() {
  var input, filter, table, tr, i;
  input = document.getElementById("txtSearch");
  filter = input.value.toUpperCase();
  table = document.getElementById("tblStudent");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) {
    let tds = tr[i].getElementsByTagName("td");
    let sextd = tds[2];
    if (sextd) {
      sextd.style.backgroundColor = ""; // Reset color when re-searching
      if (sextd.innerHTML.toUpperCase() === filter){
          sextd.style.backgroundColor = "green";
      }
    }
  }
}

Search:
<select id="txtSearch"><br><br>
  <option value="Male">Male</option>
  <option value="Female">Female</option>
</select><br><br>
<button onclick="searchForSex()">Search</button><br><br> ID:
<br>
<input type="text" id="txtProdName"><br><br> FULL Name:<br>
<input type="text" id="txtProdName"><br><br> SEX:
<br>
<select id="cboSex">
  <option value="Male">Male</option>
  <option value="Female">Female</option>
</select><br><br> COURSE:
<br>
<input type="text" id="txtCourse"><br><br> SUBJECT:
<br>
<input type="text" id="txtSubject"><br><br>

<button onclick="insertValueTable()">Save</button>
<button>Cancel</button>
<br><br>
<table border="1px">
  <th>ID</th>
  <th>FULL NAME</th>
  <th>SEX</th>
  <th>COURSE</th>
  <th>SUBJECT</th>

  <tbody id="tblStudent">
     <tr>
         <td>1</td>
         <td>Pat Johnsson</td>
         <td>Male</td>
         <td>Subject 1</td>
     </tr>
     <tr>
         <td>2</td>
         <td>Molly McGill</td>
         <td>Female</td>
         <td>Subject 2</td>
     </tr>
  </tbody>
</table>

Answer 2

这是一个更简单的解决方案：

var input;
var tableTD = document.body.querySelectorAll("#tblStudent td");

function searchForSex() {
  input = document.body.querySelector("#txtSearch").value;
  for (var tableCell of tableTD){
    tableCell.style.backgroundColor = "transparent";
    if(tableCell.innerHTML == input){
      tableCell.style.backgroundColor = "red";
    }
  }
}