資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 JavaScript 訪問表格中的元素？
要使用 JavaScript 訪問表格中的 <tr> 元素，您可以首先使用 document.getElementById() 或 document.getElementsByTagName() 方法訪問表格元素。然後，您可以使用表格的 childNodes 屬性訪問表格內的 <tr> 元素。
我們將重點關注在滑鼠懸停在當前行（我們當前所在的行）時更改其背景顏色，並在滑鼠移開時將其背景顏色恢復為正常。
示例
因此，假設我們有以下 HTML 程式碼來渲染一個表格。
<!DOCTYPE html>
<html>
<head>
<title>
Access tr element
</title>
<style type="text/css">
th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<table id="my_table">
<tr>
<th>Player</th>
<th>Country</th>
<th>Role</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>India</td>
<td>Middle Order Batsman</td>
</tr>
<tr>
<td>Steve Smith</td>
<td>Australia</td>
<td>Middle Order Batsman</td>
</tr>
<tr>
<td>Jofra Archer</td>
<td>England</td>
<td>Opening Fast Bowler</td>
</tr>
<tr>
<td>Rashid Khan</td>
<td>Afghanistan</td>
<td>Spin All-Rounder</td>
</tr>
</table>
</body>
</html>
這是表格最初的樣子 -
我們的任務是在我們懸停到的行上新增一個較深的背景，並在滑鼠離開該行後移除該背景。
方法
由於我們需要處理和應用特定的樣式到 <tr>（表格行），而不是整個表格，我們將嘗試以某種方式選擇表格的行。
我們將使用 **document.getElementByTagName** 函式來選擇所有 <tr>（表格行）。
然後在迴圈遍歷行時，我們將向其附加事件監聽器，以監聽懸停事件。
最後，在事件監聽器內部，我們將編寫更改顏色的邏輯。
示例
因此，最終程式碼將如下所示 -
<!DOCTYPE html>
<html>
<head>
<title>
Hello World
</title>
<style type="text/css">
th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<table id="my_table">
<tr>
<th>Player</th>
<th>Country</th>
<th>Role</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>India</td>
<td>Middle Order Batsman</td>
</tr>
<tr>
<td>Steve Smith</td>
<td>Australia</td>
<td>Middle Order Batsman</td>
</tr>
<tr>
<td>Jofra Archer</td>
<td>England</td>
<td>Opening Fast Bowler</td>
</tr>
<tr>
<td>Rashid Khan</td>
<td>Afghanistan</td>
<td>Spin All-Rounder</td>
</tr>
</table>
<script>
const tableRows = document.getElementsByTagName('tr');
// starting from 1 instead of 0
// because we don’t want to apply the styling to header
for (let curr = 1; curr < tableRows.length; curr++) {
tableRows[curr].addEventListener('mouseover', function(e){
console.log("over");
tableRows[curr].style.backgroundColor = '#aaa';
});
tableRows[curr].addEventListener('mouseleave', function(e){
console.log("leave");
tableRows[curr].style.backgroundColor = '';
});
}
</script>
</body>
</html>
程式碼理解
此 HTML 程式碼建立一個表格，其中包含一個標題行和四個資料行。
該表格具有基本的樣式，以向單元格新增填充和邊框。
JavaScript 程式碼向每個資料行新增事件監聽器，當滑鼠懸停在其上時更改行的背景顏色，並在滑鼠離開時將其更改回預設顏色。
當滑鼠分別進入和離開行時，控制檯也將記錄“over”和“leave”。
更新於: 2023年2月6日
11K+ 次瀏覽
廣告