<style>
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微軟雅黑";
color: #fff;
}
td {
font: 14px "微軟雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
// 模擬從后臺(tái)拿到的數(shù)據(jù)
var data = [{
name: "傳智播客",
url: "http://www.itcast.cn",
type: "IT最強(qiáng)培訓(xùn)機(jī)構(gòu)"
}, {
name: "黑馬程序員",
url: "http://www.itheima.com",
type: "大學(xué)生IT培訓(xùn)機(jī)構(gòu)"
}, {
name: "傳智前端學(xué)院",
url: "http://web.itcast.cn",
type: "前端的黃埔軍校"
}];
//需求:點(diǎn)擊按鈕吃挑，然后生成tr里面生成三個(gè)td.數(shù)組元素個(gè)數(shù)個(gè)tr。然后放入tbody中
//步驟：
//1.綁定事件
//2.利用for循環(huán),把數(shù)組中的所有數(shù)據(jù)組合成一個(gè)字符串街立。
//3.把生成的字符串設(shè)置為html內(nèi)容添加進(jìn)tbody中舶衬。
//1.綁定事件
$("input").click(function () {
//寫入到click事件中，每次點(diǎn)擊以后把str清空
var str = "";
//2.利用for循環(huán),把數(shù)組中的所有數(shù)據(jù)組合成一個(gè)字符串赎离。
for(var i=0;i<data.length;i++){
//如何生成3組逛犹？？梁剔？
// str += "<tr><td>1</td><td>2</td><td>3</td></tr>";
//data[i] = 數(shù)組中的每一個(gè)json
//data[i].name = 數(shù)組中的每一個(gè)json的name屬性值
str += "<tr><td>"+data[i].name+"</td><td>"+data[i].url+"</td><td>"+data[i].type+"</td></tr>";
}
//3.把生成的字符串設(shè)置為html內(nèi)容添加進(jìn)tbody中虽画。
$("#j_tbData").html(str);
})
})
</script>
</head>
<body>
<input type="button" value="獲取數(shù)據(jù)" id="j_btnGetData"/>
<table>
<thead>
<tr>
<th>標(biāo)題</th>
<th>地址</th>
<th>說(shuō)明</th>
</tr>
</thead>
<tbody id="j_tbData">
<!--<tr>-->
<!--<td>1</td>-->
<!--<td>2</td>-->
<!--<td>3</td>-->
<!--</tr>-->
</tbody>
</table>
</body>
動(dòng)態(tài)創(chuàng)建表格（html）
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)终惑，“玉大人绍在，你說(shuō)我怎么就攤上這事。” “怎么了揣苏？”我有些...
- 文/不壞的土叔 我叫張陵悯嗓，是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我卸察，道長(zhǎng)脯厨，這世上最難降的妖魔是什么？ 我笑而不...
- 正文 為了忘掉前任坑质，我火速辦了婚禮合武，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘涡扼。我一直安慰自己稼跳，他們只是感情好，可當(dāng)我...
- 文/花漫 我一把揭開(kāi)白布吃沪。 她就那樣靜靜地躺著汤善，像睡著了一般。 火紅的嫁衣襯著肌膚如雪票彪。 梳的紋絲不亂的頭發(fā)上红淡，一...
- 那天，我揣著相機(jī)與錄音降铸，去河邊找鬼在旱。 笑死，一個(gè)胖子當(dāng)著我的面吹牛推掸，可吹牛的內(nèi)容都是我干的桶蝎。 我是一名探鬼主播，決...
- 文/蒼蘭香墨 我猛地睜開(kāi)眼谅畅，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼登渣！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起毡泻，我...
- 序言：老撾萬(wàn)榮一對(duì)情侶失蹤绍豁，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后牙捉，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體竹揍，經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年邪铲，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了芬位。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
- 正文 年R本政府宣布四康，位于F島的核電站，受9級(jí)特大地震影響狭握，放射性物質(zhì)發(fā)生泄漏闪金。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒙蒙 一论颅、第九天 我趴在偏房一處隱蔽的房頂上張望哎垦。 院中可真熱鬧，春花似錦恃疯、人聲如沸漏设。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)郑口。三九已至，卻和暖如春盾鳞，著一層夾襖步出監(jiān)牢的瞬間犬性，已是汗流浹背。 一陣腳步聲響...
- 正文 我出身青樓攒砖，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親日裙。 傳聞我的和親對(duì)象是個(gè)殘疾皇子吹艇，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 制作這樣的下拉菜單，是很平常的操作昂拂。不少人都會(huì)受神，但是如果有新的武器‘偃月刀’輸入到單元格A8，下拉菜單就不會(huì)自動(dòng)更...
- 創(chuàng)建表格 想在網(wǎng)頁(yè)上展示上述表格效果可以使用以下代碼： 創(chuàng)建表格的四個(gè)元素： table格侯、tbody鼻听、tr、th联四、...
- 要求：用HTML實(shí)現(xiàn)如下所示的表格 對(duì)于初學(xué)者而言當(dāng)看到這個(gè)表格的時(shí)候會(huì)不會(huì)有點(diǎn)懵呢撑碴？表頭又是行合并，又是列合并的...
- After the spring festival, I came back to work. At the...
