如何使用JavaScript DOM取得單元格的innerHTML？-html教學-PHP中文網

使用表格單元格集合

文法

範例

透過使用者輸入使用 cells 屬性

首頁

web前端

html教學

如何使用JavaScript DOM取得單元格的innerHTML？

王林

Sep 09, 2023 pm 05:17 PM

如何使用JavaScript DOM获取单元格的innerHTML？

在本教學中，我們將學習如何使用 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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7821

Java教學

1647

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1238

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

Gitee Pages靜態網站部署失敗：單個文件404錯誤如何排查和解決？ Apr 04, 2025 pm 11:54 PM

GiteePages靜態網站部署失敗：404錯誤排查與解決在使用Gitee...

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。