Heim >Web-Frontend >HTML-Tutorial >Wie erhalte ich das innerHTML einer Zelle mithilfe von JavaScript DOM?
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
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.
let Cell= document.getElementById("id").rows[rowNumber].cells;
document.getElementById("result").innerHTML = Cell[colNumber].innerHTML
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.
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>
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.
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.
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
In der obigen Syntax erhalten wir die Zeile, Spalte und den Inhalt der Zelle vom Benutzer und greifen entsprechend auf den Inhalt zu.
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>
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!