資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript DOM 獲取單元格的 innerHTML？
在本教程中，我們將學習如何使用 JavaScript DOM 獲取單元格的 innerHTML。使用 JavaScript 中的 innerHTML 屬性來獲取單元格的 innerHTML。
我們可以使用 document.getElementById() 輕鬆地操作 DOM（文件物件模型）。這是一種方法，它返回表示元素 ID 的元素物件，該元素的 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>
正如使用者所看到的，單擊“單擊此處”按鈕後，將呼叫“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 屬性來獲取單元格集合。在單元格集合上，我們可以應用索引來獲取特定的單元格。
8K+ 瀏覽量
