Heim > Web-Frontend > HTML-Tutorial > Wie erhalte ich das innerHTML einer Zelle mithilfe von JavaScript DOM?

Wie erhalte ich das innerHTML einer Zelle mithilfe von JavaScript DOM?

王林
Freigeben: 2023-09-09 17:17:02
nach vorne
1450 Leute haben es durchsucht

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

In diesem Tutorial erfahren Sie, wie Sie mit JavaScript DOM das innereHTML einer Zelle abrufen. Verwenden Sie die innerHTML-Eigenschaft in JavaScript, um das innerHTML der Zelle abzurufen.

Wir können das DOM (Document Object Model) einfach mit document.getElementById() manipulieren. Es handelt sich um eine Methode, die ein Elementobjekt zurückgibt, das die ID des im Methodenparameter genannten Elements darstellt. Da die ID jedes Tags eindeutig ist, können wir problemlos über die ID auf das Element zugreifen. Dann hilft das innerHTML-Attribut dabei, auf den Text oder Inhalt dieses Tags zuzugreifen

Verwenden Sie Tabellenzellensammlungen

Um auf den Inhalt einer beliebigen Zelle in einer beliebigen Tabelle zuzugreifen, müssen wir zunächst mit document.getElementById() auf das Tabellen-Tag zugreifen. Basierend auf der Zeilen- und Spaltennummer greifen wir dann auf diese bestimmte Zelle zu und können mithilfe der innerHTML-Eigenschaft auf den Inhalt zugreifen.

Sowohl Zeilennummern als auch Spaltennummern beginnen bei 0. Wenn wir also auf die erste Zeile zugreifen möchten, müssen wir Zeile[0] schreiben.

Benutzer können den Typattributwert des Links gemäß der folgenden Syntax abrufen.

Grammatik

let Cell= document.getElementById("id").rows[rowNumber].cells;
document.getElementById("result").innerHTML = Cell[colNumber].innerHTML
Nach dem Login kopieren

In der obigen Syntax können Benutzer sehen, dass wir document.getElementById().rows[] verwenden, um Zugriff auf Zeilen zu erhalten. Um dann auf die Zellen zuzugreifen, haben wir die Eigenschaft .cells geschrieben. Auf den Inhalt der Zelle greifen wir über die Eigenschaft innerHTML in der nächsten Zeile zu.

Beispiel

Im folgenden Beispiel haben wir eine Tabelle mit den Tags table, tr und td erstellt. Um dann auf die Tabelle zuzugreifen, haben wir die Methode document.getElementById() geschrieben. Um auf die erste Zelle (d. h. Zeile 1, Spalte 1) zuzugreifen, rufen wir Zeilen[0] ab und speichern sie in der Variablen „Cell“. Um dann auf den Inhalt zuzugreifen, verwenden wir 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>
Nach dem Login kopieren

Wie der Benutzer sehen kann, wird nach dem Klicken auf die Schaltfläche „Hier klicken“ die Funktion „getCell“ aufgerufen, die auf den ersten Zellinhalt zugreift.

Verwenden Sie das Zellenattribut über Benutzereingaben

Um auf den Inhalt einer beliebigen Zelle in einer beliebigen Tabelle zuzugreifen, müssen wir zunächst mit document.getElementById() auf das Tabellen-Tag zugreifen. Basierend auf der Zeilen- und Spaltennummer haben wir dann Zugriff auf diese bestimmte Zelle und können über das innerHTML-Attribut auf den Inhalt zugreifen. Hier verwenden wir die Prompt-Methode des Fensterobjekts, um Benutzereingaben zu erhalten. Abhängig von der Auswahl des Benutzers können wir auf die Zelle zugreifen.

Sowohl Zeilennummern als auch Spaltennummern beginnen bei 0. Wenn wir also auf die erste Zeile zugreifen möchten, müssen wir Zeile[0] schreiben.

Benutzer können den Typattributwert des Links gemäß der folgenden Syntax abrufen.

Grammatik

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
Nach dem Login kopieren

In der obigen Syntax erhalten wir die Zeile, Spalte und den Inhalt der Zelle vom Benutzer und greifen entsprechend auf den Inhalt zu.

Beispiel

Im folgenden Beispiel haben wir eine Tabelle mit den Tags table, tr und td erstellt. Um dann auf die Tabelle zuzugreifen, haben wir die Methode document.getElementById() geschrieben. Wie bereits in der Syntax erwähnt, erhalten wir die Zeile, die Spalte und den Inhalt der Zelle vom Benutzer und speichern sie jeweils in den Variablen „row“, „col“ und „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>
Nach dem Login kopieren

In diesem Tutorial haben wir eine Möglichkeit besprochen, das innereHTML einer Zelle mithilfe von JavaScript DOM abzurufen. Wir greifen zunächst mit der Methode document.getElementByID() auf die Tabelle zu. Dann wenden wir die rows-Eigenschaft an, um die Sammlung aller Zeilen zu erhalten. In der Zeilensammlung wenden wir die Zelleneigenschaft an, um die Zellensammlung zu erhalten. Auf eine Sammlung von Zellen können wir einen Index anwenden, um eine bestimmte Zelle abzurufen.

Das obige ist der detaillierte Inhalt vonWie erhalte ich das innerHTML einer Zelle mithilfe von JavaScript DOM?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage