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

Heim

Web-Frontend

js-Tutorial

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)

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;动态创建表格&lt;/title&gt;
&lt;script type="text/javascript"&gt;
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 = "&lt;a href='" + data[key] + "'&gt;" + data[key] + "&lt;/a&gt;";
 tr.appendChild(td2);
 table.appendChild(tr);
 }
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;table id="tblMain"&gt;&lt;/table&gt;
 &lt;input type="button" value="动态添加网格数据" 
 onclick="AppendTableData()" /&gt;
&lt;/body&gt;
&lt;/html&gt;

Nach dem Login kopieren

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

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 &lt;title&gt;添加网格数据(处理了IE兼容问题)&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 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 = "&lt;a href='" + value + "'&gt;" + value + "&lt;/a&gt;";
  }
 }
 &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;table border="1" id="tblMain"&gt;&lt;/table&gt;
 &lt;input type="button" value="添加网格数据(处理了IE兼容问题)"
 onclick="AppendData()" /&gt;
&lt;/body&gt;
&lt;/html&gt;

Nach dem Login kopieren

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

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 &lt;title&gt;动态创建表格(处理IE6兼容问题)&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 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 = "&lt;a href='" + data[key] + "'&gt;" + data[key] + "&lt;/a&gt;";
  tr.appendChild(td2);
  //table.appendChild(tr); 把这一句替换掉
  table.tBodies[0].appendChild(tr);
  }
 }
 &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;!--由于动态添加的数据在debugbar中看生成的HTML代码发现，
 会自动添加一个&lt;tbody&gt;
 并且内容是空的，把我们动态生成的数据给冲掉了，
 所以我们手工添加一个&lt;tbody&gt;
 tr添加到这个&lt;tbody&gt;下面
 --&gt;
 &lt;table id="tblMain"&gt;&lt;tbody&gt;&lt;/tbody&gt;&lt;/table&gt;
 &lt;input type="button" value="动态添加网格数据"
 onclick="AppendTableData()" /&gt;
&lt;/body&gt;
&lt;/html&gt;

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