javascript動(dòng)態(tài)向網(wǎng)頁(yè)中添加表格實(shí)現(xiàn)代碼
更新時(shí)間：2014年02月19日 15:30:54 作者：
動(dòng)態(tài)向網(wǎng)頁(yè)中添加表格的方法有很多，本文為大家介紹下利用javascript是如何實(shí)現(xiàn)的
//此段代碼在IE9、Firefox、Chorme、safair中測(cè)試顯示沒有問題，給該表格添加了一些簡(jiǎn)單的樣式，基本功能可以實(shí)現(xiàn)，還有少量問題有待改進(jìn)！
效果圖如下：
以下是代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>json數(shù)組轉(zhuǎn)成表格</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<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:'xiaoxiao',age:12,gender:'male'},{name:'xiao',age:22,gender:'male'},{name:'hh',age:12,gender:'female'},{name:'ran',age:20,gender:'female'}];
//網(wǎng)頁(yè)加載完成后執(zhí)行該onload事件
onload = function(){
var body=document.getElementsByTagName('body')[0];
body.appendChild(createTable(data));
};
//根據(jù)傳入的json數(shù)組創(chuàng)建表格
var createTable = function(data){
//定義表格
var table=document.createElement('table');
table.setAttribute('style','width: 450px;');
//定義表格標(biāo)題
var caption=document.createElement('caption');
caption.innerHTML ='學(xué)生信息表';
//將標(biāo)題添加進(jìn)表格
table.appendChild(caption);
//調(diào)用createTr()方法生成標(biāo)題行并將其添加到table中。
table.appendChild(createTr('姓名','年齡','性別'));
table.childNodes[1].setAttribute('style','background:#cae8ea;');
//alert(table.firstChild);
//for循環(huán)json對(duì)象,然后將循環(huán)到的對(duì)象通過(guò)createTr()方法生成行，添加到table中
for(var i=0;i<data.length;i++){
table.appendChild(createTr(data[i].name,data[i].age,data[i].gender));
}
return table;
};
//根據(jù)用戶傳過(guò)來(lái)的變量生成表格中行的方法
var createTr = function(name,age,gender){
//定義行元素標(biāo)簽
var tr=document.createElement('tr');
//定義列元素標(biāo)簽
var tdName=document.createElement('td');
//設(shè)置該列節(jié)點(diǎn)的文本節(jié)點(diǎn)的值
tdName.innerHTML = name;
var tdAge = document.createElement('td');
tdAge.innerHTML = age;
var tdGender = document.createElement('td');
tdGender.appendChild(document.createTextNode(gender));//等價(jià)與 tdGender.innerHTML = gender;
//將列值添加到行元素節(jié)點(diǎn)
tr.appendChild(tdName);
tr.appendChild(tdAge);
tr.appendChild(tdGender);
//返回生成的行標(biāo)簽
return tr;
};
</script>
</head>
<body>
</body>
</html>
效果圖如下：
以下是代碼：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>json數(shù)組轉(zhuǎn)成表格</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<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:'xiaoxiao',age:12,gender:'male'},{name:'xiao',age:22,gender:'male'},{name:'hh',age:12,gender:'female'},{name:'ran',age:20,gender:'female'}];
//網(wǎng)頁(yè)加載完成后執(zhí)行該onload事件
onload = function(){
var body=document.getElementsByTagName('body')[0];
body.appendChild(createTable(data));
};
//根據(jù)傳入的json數(shù)組創(chuàng)建表格
var createTable = function(data){
//定義表格
var table=document.createElement('table');
table.setAttribute('style','width: 450px;');
//定義表格標(biāo)題
var caption=document.createElement('caption');
caption.innerHTML ='學(xué)生信息表';
//將標(biāo)題添加進(jìn)表格
table.appendChild(caption);
//調(diào)用createTr()方法生成標(biāo)題行并將其添加到table中。
table.appendChild(createTr('姓名','年齡','性別'));
table.childNodes[1].setAttribute('style','background:#cae8ea;');
//alert(table.firstChild);
//for循環(huán)json對(duì)象,然后將循環(huán)到的對(duì)象通過(guò)createTr()方法生成行，添加到table中
for(var i=0;i<data.length;i++){
table.appendChild(createTr(data[i].name,data[i].age,data[i].gender));
}
return table;
};
//根據(jù)用戶傳過(guò)來(lái)的變量生成表格中行的方法
var createTr = function(name,age,gender){
//定義行元素標(biāo)簽
var tr=document.createElement('tr');
//定義列元素標(biāo)簽
var tdName=document.createElement('td');
//設(shè)置該列節(jié)點(diǎn)的文本節(jié)點(diǎn)的值
tdName.innerHTML = name;
var tdAge = document.createElement('td');
tdAge.innerHTML = age;
var tdGender = document.createElement('td');
tdGender.appendChild(document.createTextNode(gender));//等價(jià)與 tdGender.innerHTML = gender;
//將列值添加到行元素節(jié)點(diǎn)
tr.appendChild(tdName);
tr.appendChild(tdAge);
tr.appendChild(tdGender);
//返回生成的行標(biāo)簽
return tr;
};
</script>
</head>
<body>
</body>
</html>
您可能感興趣的文章:
- js下為表格內(nèi)部動(dòng)態(tài)添加行的代碼
- javascript動(dòng)態(tài)添加表格數(shù)據(jù)行(ASP后臺(tái)數(shù)據(jù)庫(kù)保存例子)
- javascript 動(dòng)態(tài)添加表格行
- js生成動(dòng)態(tài)表格并為每個(gè)單元格添加單擊事件的方法
- 動(dòng)態(tài)添加刪除表格行的js實(shí)現(xiàn)代碼
- js在不刷新的情況下動(dòng)態(tài)添加表格行[腳本之家強(qiáng)烈推薦]
- javascript如何動(dòng)態(tài)加載表格與動(dòng)態(tài)添加表格行
- js動(dòng)態(tài)添加表格數(shù)據(jù)使用insertRow和insertCell實(shí)現(xiàn)
- 原生JS操作網(wǎng)頁(yè)給p元素添加onclick事件及表格隔行變色
- 簡(jiǎn)單的js表格操作
相關(guān)文章
拓展了幾個(gè)常用的方法,需要的朋友可以參考下2013-07-07
self中resend是調(diào)用“基類方法”的原語(yǔ)，它會(huì)把當(dāng)前接收到的消息原樣發(fā)送給其原型（parent*）。在ECMA-v5時(shí)代，我們終于可以做出這個(gè)偉大的東西了。2010-07-07
下面小編就為大家?guī)?lái)一篇淺談鍵盤上回車按鈕的js觸發(fā)事件。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
這篇文章主要介為大家詳細(xì)紹了Bootstrap CSS布局之按鈕的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
JS 獲取瀏覽器和屏幕寬高等信息的實(shí)現(xiàn)思路及代碼
本節(jié)代碼主要使用了Document對(duì)象關(guān)于窗口的一些屬性，附實(shí)現(xiàn)代碼及源程序解決，有需求的朋友可以參考下2013-07-07
最近一直在弄手機(jī)端的游戲，接觸到各種動(dòng)畫。加之對(duì)之前的自己那個(gè)動(dòng)畫類不滿意，就有心想寫個(gè)新的。然后翻看各種博客，查資料。也學(xué)到一些新的東西2012-08-08
這篇文章主要為大家詳細(xì)介紹了JS鍵盤版計(jì)算器的制作方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
JS中的回調(diào)函數(shù)(callback)講解
回調(diào)函數(shù)是一段可執(zhí)行的代碼段，它作為一個(gè)參數(shù)傳遞給其他的代碼，其作用是在需要的時(shí)候方便調(diào)用這段（回調(diào)函數(shù)）代碼,這篇文章主要介紹了JS中的?回調(diào)函數(shù)（callback）,需要的朋友可以參考下2022-12-12
閉包是js的一個(gè)難點(diǎn)也是它的一個(gè)特色,是我們必須掌握的js高級(jí)特性,下面這篇文章主要給大家介紹了關(guān)于JavaScript閉包函數(shù)的相關(guān)資料,需要的朋友可以參考下2022-11-11
JS實(shí)現(xiàn)的簡(jiǎn)單表單驗(yàn)證功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單表單驗(yàn)證功能,涉及javascript針對(duì)表單提交內(nèi)容的獲取、判斷、焦點(diǎn)設(shè)置等相關(guān)操作技巧,需要的朋友可以參考下2017-10-10