在前端開發中,jQuery是一個非常重要的工具庫。它提供了豐富的API,幫助我們快速編寫高效的JavaScript代碼。這里,我們來看一下使用jQuery制作課程表的例子。
//課程時間和內容
var courses = [
{
time: "周一上午1-2節",
name: "Web前端開發"
},
{
time: "周三下午1-2節",
name: "移動端APP開發"
},
{
time: "周四上午1-2節",
name: "大數據分析"
},
{
time: "周五下午3-4節",
name: "云計算原理"
}
];
//創建課程表
function createTable() {
var table = $("<table></table>");
var tr = $("<tr></tr>");
var td = $("<td></td>");
var coursesLen = courses.length;
//創建表頭
table.append($("<thead><tr><th>時間/日期</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr></thead>"));
//創建表格內容
var tbody = $("<tbody></tbody>");
for(var i=0; i<coursesLen; i++) {
var course = courses[i];
var time = course.time;
//創建每一行
var tr = $("<tr></tr>");
tr.append(td.clone().text(time));
//創建每個單元格
for(var j=0; j<5; j++) {
var td = $("<td></td>");
if(j === 1) {
td.append($("<span></span>").text(course.name));
}
tr.append(td);
}
tbody.append(tr);
}
table.append(tbody);
return table;
}
//將課程表添加到頁面中
$(".table-container").append(createTable());
如上代碼所示,首先定義了課程時間和內容的數組courses。然后,使用函數createTable()創建課程表。函數內部先創建表頭,再創建表格內容。在創建表格內容時,使用嵌套的for循環來創建每個單元格,并通過判斷來顯示課程內容。最后,將課程表添加到HTML中。通過以上步驟,我們就成功使用jQuery制作了一張課程表。希望這個例子能對大家有所幫助。