JavaScript動態建立table表格
分享一段程式碼例項,能夠動態的建立一個表格並且填充表格資料。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> caption{ padding:0 0 5px 0; width:450px; font:italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; text-align:right; } td{ border:1px solid #c1dad7; padding:6px 6px 6px 12px; color:#4f6b72; text-align:center; width:150px; } </style> <script type="text/javascript"> var data=[{name:'螞蟻部落一',age:3,gender:'市南區'},{name:'螞蟻部落二',age:3,gender:'市南區'},{name:'螞蟻部落三',age:3,gender:'市南區'},{name:'螞蟻部落四',age:3,gender:'市南區'}]; onload = function(){ var body=document.getElementsByTagName('body')[0]; body.appendChild(createTable(data)); }; var createTable = function(data){ var table=document.createElement('table'); table.setAttribute('style','width: 450px;'); var caption=document.createElement('caption'); caption.innerHTML ='網站介紹'; table.appendChild(caption); table.appendChild(createTr('名稱','年齡','地址')); table.childNodes[1].setAttribute('style','background:#cae8ea;'); for(var i=0;i<data.length;i++){ table.appendChild(createTr(data[i].name,data[i].age,data[i].gender)); } return table; }; var createTr = function(name,age,gender){ var tr=document.createElement('tr'); var tdName=document.createElement('td'); tdName.innerHTML = name; var tdAge = document.createElement('td'); tdAge.innerHTML = age; var tdGender = document.createElement('td'); tdGender.appendChild(document.createTextNode(gender)); tr.appendChild(tdName); tr.appendChild(tdAge); tr.appendChild(tdGender); return tr; }; </script> </head> <body> </body> </html>
相關文章
- JavaScript 動態建立table表格JavaScript
- javascript動態建立table表格程式碼示例JavaScript
- javascript動態建立table表格並新增資料程式碼JavaScript
- JavaScript動態為table表格新增行JavaScript
- js如何動態建立一個table表格JS
- javascript動態建立指定行與列table表格程式碼例項JavaScript
- JavaScript動態建立表格和增加表格的行JavaScript
- javascript動態操作table表格程式碼例項JavaScript
- 動態建立具有刪除行按鈕的table表格
- 動態建立表格
- javascript動態設定table表格的cellpadding和cellspacingJavaScriptpadding
- javascript動態刪除或者新增table表格行程式碼例項JavaScript行程
- js動態建立table表格和刪除指定行列程式碼例項JS
- javascript 動態新增表格行JavaScript
- JavaScript刪除table表格中行JavaScript
- JavaScript刪除table表格列JavaScript
- 兩種動態建立表格的方法
- 如何在iView中動態建立表格View
- JavaScript動態向表格新增資料JavaScript
- JavaScript設定table表格邊框JavaScript
- JavaScript刪除table表格指定行JavaScript
- FineUIMvc隨筆(1)動態建立表格列UIMVC
- 動態建立table表格併為每一個td單元格註冊點選事件事件
- JavaScript 動態建立style標籤JavaScript
- JavaScript動態建立文字節點JavaScript
- JavaScript獲取table表格指定列的值JavaScript
- js動態新增和刪除table表格行程式碼例項JS行程
- 使用JS動態建立含有1000行的表格JS
- JavaScript table表格行進行刪除和新增JavaScript
- javascript生成指定行列table表格程式碼例項JavaScript
- JavaScript動態建立div並寫入文字JavaScript
- javascript動態建立元素程式碼例項JavaScript
- JavaScript動態建立div並新增樣式JavaScript
- JavaScript動態建立元素和追加元素JavaScript
- JavaScript動態建立select下拉選單JavaScript
- JavaScript獲取table表格行與列的數量JavaScript
- ajax動態生成table
- javascript動態刪除和新增表格行程式碼例項JavaScript行程