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?
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
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>
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
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>
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1385
52
Was ist der Zweck des & lt; Fortschritts & gt; Element?
Mar 21, 2025 pm 12:34 PM
Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati
Was ist der Zweck des & lt; datalist & gt; Element?
Mar 21, 2025 pm 12:33 PM
Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159
Was ist der Zweck des & lt; Meter & gt; Element?
Mar 21, 2025 pm 12:35 PM
Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex
Ist HTML für Anfänger leicht zu lernen?
Apr 07, 2025 am 12:11 AM
HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.
Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design?
Mar 20, 2025 pm 05:56 PM
In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.
Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?
Mar 20, 2025 pm 06:05 PM
Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
Was ist ein Beispiel für ein Start -Tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.
