Question

在我的表格中，我有学生ID，全名，性别，课程和主题。我使用组合框搜索表中的所有“男性”或“女性”。例如，我选择“男性”，我希望所有“男性”列或单元格都将以任何颜色突出显示。仅“性别”列将突出显示。如何在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输入；
var tableTD = document.body.querySelectorAll（“＃tblStudent td”）;

函数searchForSex（）{
  输入= document.body.querySelector（“＃txtSearch”）。value;
  用于（tableTD的var tableCell）{
    tableCell.style.backgroundColor =“透明”;
    if（tableCell.innerHTML == input）{
      tableCell.style.backgroundColor =“红色”;
    }
  }
}

如何突出显示表格列？

2 个答案: