使用JQuery美化课表样式
时间: 2023-06-14 10:06:24 浏览: 61
可以以下步骤使用jQuery美化课表样式:
1. 下载jQuery库文件并在HTML文件中引入。
2. 在HTML文件中添加一个表格来显示课表,例如:
```
<table id="timetable">
<thead>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
</thead>
<tbody>
<tr>
<th>8:00-10:00</th>
<td>Class 1</td>
<td>Class 2</td>
<td>Class 3</td>
<td>Class 4</td>
<td>Class 5</td>
</tr>
<tr>
<th>10:00-12:00</th>
<td>Class 6</td>
<td>Class 7</td>
<td>Class 8</td>
<td>Class 9</td>
<td>Class 10</td>
</tr>
</tbody>
</table>
```
3. 在HTML文件中添加以下jQuery代码:
```
$(document).ready(function() {
// 给表格添加 class="table table-bordered"
$('#timetable').addClass('table table-bordered');
// 给表格头部添加 class="thead-dark"
$('#timetable thead').addClass('thead-dark');
});
```
4. 在CSS文件中添加以下代码来自定义表格样式:
```
.table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
background-color: transparent;
}
.table-bordered {
border: 1px solid #dee2e6;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #dee2e6;
}
.thead-dark {
color: #fff;
background-color: #343a40;
border-color: #454d55;
}
```
这样,你就可以使用jQuery美化课表样式了。