HTML表格是網頁開發中一個非常重要的組件，可以用于展示數據信息、構建布局等等。而在表格中，設置查找功能也是一個非常實用的功能。下面我們就來學習一下如何在HTML表格中設置查找功能。

<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小明</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>小紅</td>
<td>19</td>
<td>女</td>
</tr>
<tr>
<td>3</td>
<td>小剛</td>
<td>20</td>
<td>男</td>
</tr>
</tbody>
</table>

以上代碼是一個簡單的HTML表格的例子，其中包含了ID、姓名、年齡、性別四列。如果需要在表格中設置查找功能，可以添加一個輸入框和一個按鈕：

<input type="text" id="search-input">
<button onclick="searchTable()">查找</button>

輸入框的類型為text，而按鈕的點擊事件是調用searchTable()函數。接下來就需要定義searchTable()函數的實現：

<script>
function searchTable() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("search-input");
filter = input.value.toUpperCase();
table = document.getElementsByTagName("table")[0];
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>

以上代碼實現了一個簡單的表格查找功能，具體實現流程如下：

• 獲取輸入框中的值
• 將輸入值轉換為大寫字母，便于忽略大小寫的對比
• 獲取表格元素
• 獲取表格行數
• 遍歷每一行，獲取第一列的值進行比對
• 若匹配，則展示這一行，否則隱藏這一行

最后的效果就是在輸入框中輸入某個ID，點擊查找按鈕后，就會展示符合條件的行。