在网页中制作课表,使用jQuery技术对课表进行如下格式设置: 1、设置课程表背景图,背景图片自选,要求背景图透明化处理; 2、设置表格标题(caption元素)和表格内容的字体、字号和颜色(自定义); 3、表格第一行设置区别于表格主体的背景色和字体; 4、将表格空白单元格设置背景色。
时间: 2023-06-13 21:06:31 浏览: 380
以下是使用jQuery技术制作课表的示例代码:
HTML代码:
```html
<table id="timetable">
<caption>课程表</caption>
<thead>
<tr>
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<th>第一节</th>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td></td>
<td></td>
</tr>
<tr>
<th>第二节</th>
<td>数学</td>
<td>英语</td>
<td>语文</td>
<td></td>
<td></td>
</tr>
<tr>
<th>第三节</th>
<td>英语</td>
<td>语文</td>
<td>数学</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
```
CSS代码:
```css
#timetable {
background-image: url(背景图路径);
background-color: rgba(255, 255, 255, 0.3); /* 背景图透明化处理 */
border-collapse: collapse;
font-family: "微软雅黑";
font-size: 14px;
color: #333;
}
#timetable caption {
font-size: 24px;
color: #fff; /* 自定义字体、字号和颜色 */
}
#timetable thead tr {
background-color: #ccc; /* 表格第一行背景色 */
font-weight: bold;
font-size: 16px;
}
#timetable th,
#timetable td {
padding: 5px;
text-align: center;
}
#timetable td {
background-color: #f5f5f5; /* 表格空白单元格背景色 */
}
```
JavaScript代码:
```javascript
$(document).ready(function() {
// 设置表格标题和表格内容的字体、字号和颜色
$("#timetable caption").css({
"font-family": "微软雅黑",
"font-size": "24px",
"color": "#fff"
});
$("#timetable th, #timetable td").css({
"font-family": "微软雅黑",
"font-size": "14px",
"color": "#333"
});
// 将表格空白单元格设置背景色
$("#timetable td:empty").css("background-color", "#f5f5f5");
});
```
阅读全文