Heim Web-Frontend js-Tutorial Detaillierte Erläuterung der dynamischen Erstellung von Tabellen mit Javascript und des Hinzufügens von Dateninstanzen. Javascript-Kenntnisse

Detaillierte Erläuterung der dynamischen Erstellung von Tabellen mit Javascript und des Hinzufügens von Dateninstanzen. Javascript-Kenntnisse

May 16, 2016 pm 03:59 PM
javascript Dynamisch erstellt Daten hinzufügen 表格

Das Beispiel in diesem Artikel beschreibt, wie man mithilfe von Javascript dynamisch Tabellen erstellt und Daten hinzufügt. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

1. Tabellen dynamisch erstellen (Code ist nicht mit IE6 kompatibel)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态创建表格</title>
<script type="text/javascript">
function AppendTableData() {
 var table = document.getElementById("tblMain");
 var data = { "百度": "http://www.baidu.com",
 "脚本之家": "http://www.jb51.net",
 "搜狐": "http://www.sohu.com"
 };
 for (var key in data) {
 var tr = document.createElement("tr");
 var td1 = document.createElement("td");
 td1.innerText = key;
 //FireFox不支持innerText,只能使用innerHTML
 tr.appendChild(td1);
 var td2 = document.createElement("td");
 td2.innerHTML = "<a href='" + data[key] + "'>" + data[key] + "</a>";
 tr.appendChild(td2);
 table.appendChild(tr);
 }
}
</script>
</head>
<body>
 <table id="tblMain"></table>
 <input type="button" value="动态添加网格数据" 
 onclick="AppendTableData()" />
</body>
</html>
Nach dem Login kopieren

2. Erstellen Sie dynamisch Tabellen (kompatibel mit IE6, IE7)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>添加网格数据(处理了IE兼容问题)</title>
 <script type="text/javascript">
 function AppendData() {
  var data = {"脚本之家":"http://www.jb51.net",
   "百度":"http://www.baidu.com",
   "搜狐": "http://www.sohu.com"};
  var table = document.getElementById("tblMain");
  for (var key in data) {  
  var value = data[key];
  var tr = table.insertRow(-1);
  //FireFox必须使用-1这个参数
  var td1 = tr.insertCell(-1);
  td1.innerText = key;
  var td2 = tr.insertCell(-1);
  td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";
  }
 }
 </script>
</head>
<body>
 <table border="1" id="tblMain"></table>
 <input type="button" value="添加网格数据(处理了IE兼容问题)"
 onclick="AppendData()" />
</body>
</html>
Nach dem Login kopieren

3. Erstellen Sie dynamisch Tabellen (kompatibel mit IE6 und IE7)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>动态创建表格(处理IE6兼容问题)</title>
 <script type="text/javascript">
 function AppendTableData() {
  var table = document.getElementById("tblMain");
  var data = { "百度": "http://www.baidu.com",
  "脚本之家": "http://www.jb51.net",
  "搜狐": "http://www.sohu.com"
  };
  for (var key in data) {
  var tr = document.createElement("tr");
  var td1 = document.createElement("td");
  td1.innerText = key;
  tr.appendChild(td1);
  var td2 = document.createElement("td");
  td2.innerHTML = "<a href='" + data[key] + "'>" + data[key] + "</a>";
  tr.appendChild(td2);
  //table.appendChild(tr); 把这一句替换掉
  table.tBodies[0].appendChild(tr);
  }
 }
 </script>
</head>
<body>
 <!--由于动态添加的数据在debugbar中看生成的HTML代码发现,
 会自动添加一个<tbody>
 并且内容是空的,把我们动态生成的数据给冲掉了,
 所以我们手工添加一个<tbody>
 tr添加到这个<tbody>下面
 -->
 <table id="tblMain"><tbody></tbody></table>
 <input type="button" value="动态添加网格数据"
 onclick="AppendTableData()" />
</body>
</html>
Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Repo: Wie man Teamkollegen wiederbelebt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Schritte zum Anpassen des Formats von Bildern, die in PPT-Tabellen eingefügt werden Schritte zum Anpassen des Formats von Bildern, die in PPT-Tabellen eingefügt werden Mar 26, 2024 pm 04:16 PM

1. Erstellen Sie eine neue PPT-Datei und nennen Sie sie als Beispiel [PPT-Tipps]. 2. Doppelklicken Sie auf [PPT-Tipps], um die PPT-Datei zu öffnen. 3. Fügen Sie als Beispiel eine Tabelle mit zwei Zeilen und zwei Spalten ein. 4. Doppelklicken Sie auf den Rand der Tabelle. Die Option [Design] wird in der oberen Symbolleiste angezeigt. 5. Klicken Sie auf die Option [Schattierung] und dann auf [Bild]. 6. Klicken Sie auf [Bild], um das Dialogfeld mit den Fülloptionen mit dem Bild als Hintergrund aufzurufen. 7. Suchen Sie im Verzeichnis nach dem Fach, das Sie einfügen möchten, und klicken Sie auf „OK“, um das Bild einzufügen. 8. Klicken Sie mit der rechten Maustaste auf das Tabellenfeld, um das Einstellungsdialogfeld aufzurufen. 9. Klicken Sie auf [Zellen formatieren] und aktivieren Sie [Bilder als Schattierung anordnen]. 10. Stellen Sie [Zentrieren], [Spiegeln] und andere benötigte Funktionen ein und klicken Sie auf OK. Hinweis: Standardmäßig werden Bilder in die Tabelle eingefügt

So erstellen Sie eine Tabelle für die Umsatzprognose So erstellen Sie eine Tabelle für die Umsatzprognose Mar 20, 2024 pm 03:06 PM

Die Fähigkeit, Formulare geschickt erstellen zu können, ist nicht nur eine notwendige Fähigkeit für Buchhaltung, Personalwesen und Finanzen, sondern auch für viele Vertriebsmitarbeiter sehr wichtig. Denn die verkaufsbezogenen Daten sind sehr umfangreich und komplex und können nicht einfach in einem Dokument zur Erklärung des Problems erfasst werden. Damit sich mehr Vertriebsmitarbeiter mit der Tabellenerstellung in Excel auskennen, stellt der Herausgeber die Tabellenerstellungsthemen zur Umsatzprognose vor. Freunde in Not sollten sich das nicht entgehen lassen. 1. Öffnen Sie [Sales Forecast and Target Setting], xlsm, um die in jeder Tabelle gespeicherten Daten zu analysieren. 2. Erstellen Sie ein neues [Leeres Arbeitsblatt], wählen Sie [Zelle] und geben Sie [Etiketteninformationen] ein. [Ziehen] Sie nach unten und [füllen] Sie den Monat aus. Geben Sie [Sonstige] Daten ein und klicken Sie auf [

So legen Sie den WPS-Wert fest, um die Farbe entsprechend den Bedingungen automatisch zu ändern. Schritte zum Festlegen des WPS-Tabellenwerts, um die Farbe entsprechend den Bedingungen automatisch zu ändern So legen Sie den WPS-Wert fest, um die Farbe entsprechend den Bedingungen automatisch zu ändern. Schritte zum Festlegen des WPS-Tabellenwerts, um die Farbe entsprechend den Bedingungen automatisch zu ändern Mar 27, 2024 pm 07:30 PM

1. Öffnen Sie das Arbeitsblatt und suchen Sie die Schaltfläche [Start]-[Bedingte Formatierung]. 2. Klicken Sie auf „Spaltenauswahl“ und wählen Sie die Spalte aus, zu der die bedingte Formatierung hinzugefügt werden soll. 3. Klicken Sie auf die Schaltfläche [Bedingte Formatierung], um das Optionsmenü aufzurufen. 4. Wählen Sie [Bedingte Regeln hervorheben]-[Zwischen]. 5. Geben Sie die Regeln ein: 20, 24, dunkelgrüner Text mit dunkler Füllfarbe. 6. Nach der Bestätigung werden die Daten in der ausgewählten Spalte entsprechend den Einstellungen mit entsprechenden Zahlen, Text und Zellenfeldern eingefärbt. 7. Bedingte Regeln ohne Konflikte können wiederholt hinzugefügt werden, aber bei widersprüchlichen Regeln ersetzt WPS die zuvor festgelegten bedingten Regeln durch die zuletzt hinzugefügte Regel. 8. Fügen Sie die Zellspalten wiederholt nach [Zwischen] Regeln 20-24 und [Weniger als] 20 hinzu. 9. Wenn Sie die Regeln ändern müssen, können Sie die Regeln einfach löschen und dann zurücksetzen.

Tipps zum dynamischen Erstellen neuer Funktionen in Golang-Funktionen Tipps zum dynamischen Erstellen neuer Funktionen in Golang-Funktionen Apr 25, 2024 pm 02:39 PM

Die Go-Sprache bietet zwei Technologien zur dynamischen Funktionserstellung: Schließung und Reflexion. Abschlüsse ermöglichen den Zugriff auf Variablen innerhalb des Abschlussbereichs, und durch Reflektion können mithilfe der FuncOf-Funktion neue Funktionen erstellt werden. Diese Technologien sind nützlich bei der Anpassung von HTTP-Routern, der Implementierung hochgradig anpassbarer Systeme und dem Aufbau steckbarer Komponenten.

Wissen Sie, wie man eine Word-Tabelle zusammenfasst? Wissen Sie, wie man eine Word-Tabelle zusammenfasst? Mar 21, 2024 pm 01:10 PM

Manchmal stoßen wir auf Zählprobleme in Word-Tabellen. Wenn solche Probleme auftreten, kopieren die meisten Schüler die Word-Tabelle zur Berechnung in die Hand. Gibt es eine schnelle Möglichkeit, es zu berechnen? Natürlich gibt es das, tatsächlich lässt sich die Summe auch in Word berechnen. Wissen Sie also, wie es geht? Lasst uns heute gemeinsam einen Blick darauf werfen! Freunde in Not sollten es kurzerhand schnell abholen! Schrittdetails: 1. Zuerst öffnen wir die Word-Software auf dem Computer und öffnen das zu bearbeitende Dokument. (Wie im Bild gezeigt) 2. Als nächstes positionieren wir den Cursor auf der Zelle, in der sich der summierte Wert befindet (wie im Bild gezeigt), und klicken dann auf [Menüleiste

Was sind die Tipps für Anfänger zum Erstellen von Formularen? Was sind die Tipps für Anfänger zum Erstellen von Formularen? Mar 21, 2024 am 09:11 AM

Wir erstellen und bearbeiten Tabellen oft in Excel, aber als Neuling, der gerade erst mit der Software in Berührung gekommen ist, ist die Verwendung von Excel zum Erstellen von Tabellen nicht so einfach wie für uns. Im Folgenden führen wir einige Übungen zu einigen Schritten der Tabellenerstellung durch, die Anfänger, also Anfänger, beherrschen müssen. Wir hoffen, dass sie für Bedürftige hilfreich sind. Unten sehen Sie ein Beispielformular für Anfänger: Mal sehen, wie man es ausfüllt! 1. Es gibt zwei Methoden, ein neues Excel-Dokument zu erstellen. Sie können mit der rechten Maustaste auf eine leere Stelle in der Datei [Desktop] – [Neu] – [xls] klicken. Sie können auch [Start]-[Alle Programme]-[Microsoft Office]-[Microsoft Excel 20**] wählen. 2. Doppelklicken Sie auf unser neues Ex

So fügen Sie automatische Nummerierung oder fortlaufende Nummern in Word-Tabellen ein So fügen Sie automatische Nummerierung oder fortlaufende Nummern in Word-Tabellen ein Mar 20, 2024 am 09:30 AM

Wenn wir Tabellen erstellen, denken wir zuerst daran, Excel-Software zum Erstellen von Tabellen zu verwenden. Aber wussten Sie, dass Word-Software tatsächlich sehr praktisch ist, um Tabellen zu erstellen? Manchmal müssen wir beim Erstellen von Tabellen in Word-Software Seriennummern eingeben Wenn Sie sie einzeln eingeben, ist dies sehr mühsam. Tatsächlich gibt es in der Word-Software eine Operation, mit der Zahlen oder Seriennummern automatisch eingefügt werden können oder Seriennummern in Word-Tabellen. 1. Erstellen Sie zunächst ein Word-Dokument und fügen Sie eine Tabelle ein. 2. Wählen Sie die Spalte oder Zelle aus, in die Sie automatische Seriennummern oder Nummern einfügen möchten. 3. Klicken Sie auf „Start“ – „Nummer“. 4. Wählen Sie eine der Stilnummern aus. 5.

Wissen Sie, wie man die Farbe der WPS-Dokumenttabelle einstellt? Wissen Sie, wie man die Farbe der WPS-Dokumenttabelle einstellt? Mar 20, 2024 am 08:19 AM

Wenn wir die Tabellenfarben in den WPS-Dokumenten anderer Leute sehen, sind die Effekte farbenfroh und schön; wir haben jedoch nur eintöniges Schwarz. Wenn man die Tabelle mit Farben füllen muss, werden das meiner Meinung nach viele Schüler tun. Wenn Sie jedoch die Farbe der Tabelle im WPS-Dokument China festlegen möchten, wird dies für viele Studenten sicherlich verwirrend sein! Lassen Sie uns heute lernen, wie Sie die Farbe der WPS-Dokumententabelle festlegen. Ich habe ein Dokument zusammengestellt, von dem ich hoffe, dass es für alle hilfreich ist. Die Schritte sind wie folgt: 1. Wir müssen eine Tabelle im WPS-Dokument zeichnen und mit der rechten Maustaste auf die Tabelle klicken, in der die Linienfarbe geändert werden soll. 2. Als nächstes klicken Sie mit der Maus auf die [rechte Maustaste] auf der Tabelle. Im Popup-Menü finden Sie [Rand und Schattierung]. 3. Zu diesem Zeitpunkt wird die Option [Rand und Schattierung] geöffnet.

See all articles