如何使用JavaScript DOM取得單元格的innerHTML？
- 王林轉載
- 2023-09-09 17:17:021425瀏覽
在本教學中，我們將學習如何使用 JavaScript DOM 取得單元格的innerHTML。使用JavaScript中的innerHTML屬性來取得單元格的innerHTML。
我們可以使用 document.getElementById() 輕鬆操作 DOM（文檔物件模型）。它是一個傳回元素物件的方法，該物件表示該方法參數中提到的元素的 id。由於每個標籤的 id 都是唯一的，因此我們可以輕鬆地透過 id 存取該元素。然後innerHTML屬性將有助於存取該標籤的文字或內容
使用表格單元格集合
要存取任何表格中任何儲存格的內容，我們首先必須使用 document.getElementById() 存取表格標籤。然後根據行號和列號，我們將存取該特定單元格，並且可以使用innerHTML 屬性存取內容。
行號和列號都是從0開始的，所以如果我們要存取第一行，我們必須寫row[0]。
使用者可以依照以下語法取得連結的type屬性值。
文法
let Cell= document.getElementById("id").rows[rowNumber].cells;
document.getElementById("result").innerHTML = Cell[colNumber].innerHTML
在上面的語法中，使用者可以看到我們使用 document.getElementById().rows[] 來取得行的存取權限。然後為了存取單元格，我們編寫了 .cells 屬性。我們使用下一行中的innerHTML 屬性來存取單元格的內容。
範例
在下面的範例中，我們使用 table、tr 和 td 標籤建立了一個表格。然後為了存取該表，我們編寫了 document.getElementById() 方法。為了存取第一個單元格（即第 1 行、第 1 列），我們取得 rows[0] 並將它們儲存在「Cell」變數中。然後，為了存取內容，我們使用了 Cell[0].innerHTML。
<html>
<head>
<style>
table,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<h3> Get the innerHTML of a cell <i> Using
document.getElementById()</i> </h3>
<p> Click the button to get the innerHTML of first cell </p>
<table id = "myTable">
<tr>
<td> Row1 Col1 Cell 1 </td>
<td> Row1 Col2 Cell 2 </td>
</tr>
<tr>
<td> Row2 Col1 Cell 3 </td>
<td> Row2 Col2 Cell 4 </td>
</tr>
<tr>
<td> Row3 Col1 Cell 5 </td>
<td> Row3 Col2 Cell 6 </td>
</tr>
</table>
<br>
<button onclick = " getCell()"> Click Here! </button>
<p id = "result"> Result Here </p>
<script>
function getCell() {
//Getting access to cell 1
let Cell = document.getElementById("myTable").rows[0].cells;
document.getElementById("result").innerHTML =
Cell[0].innerHTML
}
</script>
</body>
</html>
如使用者所見，在點擊「Click Here」按鈕後，呼叫了「getCell」函數，該函數存取了第一個單元格內容。
透過使用者輸入使用 cells 屬性
要存取任何表格中任何儲存格的內容，我們首先必須使用 document.getElementById() 存取表格標籤。然後根據行號和列號，我們將可以存取該特定單元格，並且可以使用innerHTML 屬性存取內容。這裡我們採用了window物件的prompt方法來取得使用者的輸入。根據使用者的選擇，我們可以存取該儲存格。
行號和列號都是從0開始的，所以如果我們要存取第一行，我們必須寫row[0]。
使用者可以依照以下語法取得連結的type屬性值。
文法
let row = window.prompt("Enter row number");
let column = window.prompt("Enter column number");
let Cell = document.getElementById('id').rows[row].cells;
document.getElementById("result").innerHTML = Cell[col].innerHTML
在上面的語法中，我們從使用者那裡獲取了單元格的行、列和內容，並相應地存取了內容。
範例
在下面的範例中，我們使用 table、tr 和 td 標籤建立了一個表格。然後為了存取該表，我們編寫了 document.getElementById() 方法。如同前面在語法中提到的，我們從使用者那裡取得單元格的行、列和內容，並將它們分別儲存在「row」、「col」和「content」變數中。
<html>
<head>
<style>
table,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<h3> Get the innerHTML of a cell using<i> document.getElementById()
</i>with user input </h3>
<p> Click the button to get innerHTML of a cell </p>
<table id = "myTable">
<tr>
<td> Row1 Col1 Cell 1 </td>
<td> Row1 Col2 Cell 2 </td>
</tr>
<tr>
<td> Row2 Col1 Cell 3 </td>
<td> Row2 Col2 Cell 4 </td>
</tr>
<tr>
<td> Row3 Col1 Cell 5 </td>
<td> Row3 Col2 Cell 6 </td>
</tr>
</table>
<br>
<button onclick="getCell()">Click Here!</button>
<p id ="result"> Result Here</p>
<script>
function getCell() {
let row = window.prompt("Enter row number: ", "0");
let col = window.prompt("Enter column number", "0")
let Cell =
document.getElementById('myTable').rows[row].cells;
document.getElementById("result").innerHTML =
Cell[col].innerHTML
}
</script>
</body>
</html>
在本教學中，我們討論了一種使用 JavaScript DOM 取得單元格的 innerHTML 的方法。我們首先使用 document.getElementByID() 方法存取該表。然後我們應用 rows 屬性來取得所有行的集合。在 rows 集合中，我們應用 cells 屬性來取得 cells 集合。在單元格集合上，我們可以應用索引來取得特定的單元格。
以上是如何使用JavaScript DOM取得單元格的innerHTML？的詳細內容。更多資訊請關注PHP中文網其他相關文章！