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

javascriptprogramming scriptshtml

在本教程中，我们将学习如何使用 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>

如用户所见，单击"单击此处"按钮后，将调用"getCell"函数，该函数访问第一个单元格的内容。

使用单元格属性处理用户输入

要访问任何表中任何单元格的内容，我们首先必须使用 document.getElementById() 访问表标签。然后根据行号和列号，我们将访问该特定单元格，并且我们可以使用 innerHTML 属性访问内容。在这里，我们采用窗口对象的 prompt 方法来获取用户的输入。根据用户的选择，我们可以访问该单元格。

行号和列号从 0 开始。因此，如果我们要访问第一行，则必须写入 row[0]。

用户可以按照以下语法获取链接的 type 属性的值。

语法

let row = window.prompt("输入行号");
let column = window.prompt("输入列号");
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 获取单元格内部 HTML 的方法。我们首先使用 document.getElementByID() 方法访问表。然后我们应用 rows 属性来获取所有行的集合。在 rows 集合中，我们应用 cells 属性来获取单元格集合。在单元格集合中，我们可以应用索引来获取特定单元格。

打印下一节 ❯