如何使用 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 属性访问内容。这里我们使用了窗口对象的 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日

7K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告