如何使用 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 属性来获取单元格集合。在单元格集合上，我们可以应用索引来获取特定的单元格。

更新于: 2022年10月12日

8K+ 浏览量

启动你的 职业生涯

通过完成课程获得认证

开始学习
广告