我有一个时间表供学生注册，学生可以选择要上课的课程。
现在，我有一个问题：当将新类添加到时间表时，我不知道如何自动添加col-span。
我可以参考任何完善的项目或jQuery或技术吗？可以和我分享吗？谢谢。
首先，时间表是空白的：
添加新类后：
这是我的代码（没有javascript和JQuery，我自己输入的结果）：
<!DOCTYPE html>
<html>
<head>
<style>
td {
padding: 5px;
}
</style>
</head>
<body>
<table width="80%" align="center" cellpadding="0" cellspacing="0" border="1">
<tr valign="middle">
<th rowspan="2" width="50" scope="col">Day/Time</th>
<th colspan="2" class="col">
<div align="center">07:00</div>
</th>
<th colspan="2" class="col">
<div align="center">08:00</div>
</th>
<th colspan="2" class="col">
<div align="center">09:00</div>
</th>
<th colspan="2" class="col">
<div align="center">10:00</div>
</th>
<th colspan="2" class="col">
<div align="center">11:00</div>
</th>
<th colspan="2" class="col">
<div align="center">12:00</div>
</th>
<th colspan="2" class="col">
<div align="center">01:00</div>
</th>
<th colspan="2" class="col">
<div align="center">02:00</div>
</th>
<th colspan="2" class="col">
<div align="center">03:00</div>
</th>
<th colspan="2" class="col">
<div align="center">04:00</div>
</th>
<th colspan="2" class="col">
<div align="center">05:00</div>
</th>
</tr>
<tr>
<th colspan="2" scope="col">
<div align="center">08:00</div>
</th>
<th colspan="2" scope="col">
<div align="center">09:00</div>
</th>
<th colspan="2" scope="col">
<div align="center">10:00</div>
</th>
<th colspan="2" scope="col">
<div align="center">11:00</div>
</th>
<th colspan="2" scope="col">
<div align="center">12:00</div>
</th>
<th colspan="2" scope="col">
<div align="center">01:00</div>
</th>
<th colspan="2" scope="col">
<div align="center">02:00</div>
</th>
<th colspan="2" scope="col">
<div align="center">03:00</div>
</th>
<th colspan="2" scope="col">
<div align="center">04:00</div>
</th>
<th colspan="2" scope="col">
<div align="center">05:00</div>
</th>
<th colspan="2" scope="col">
<div align="center">06:00</div>
</tr>
<tr align="center">
<th>Mon</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
</tr>
<tr align="center">
<th>Tue</th>
<td></td>
<td></td>
</td>
<td>
<td></td>
<td></td>
<td></td>
<td></td>
</td>
<td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
</tr>
<tr align="center">
<th>Wed</th>
<td></td>
<td></td>
</td>
<td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
</tr>
<tr align="center">
<th>Thu</th>
<td></td>
<td></td>
</td>
<td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
</tr>
<tr align="center">
<th>Fri</th>
<td></td>
<td></td>
</td>
<td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
</tr>
</table>
<div style="padding-left: 150px">
<h4>Class Available:</h3>
<table border="1">
<tr>
<th>Class</th>
<th>Day</th>
<th>Time</th>
</tr>
<tr>
<td>Class A</td>
<td>Tue</td>
<td>09.00am - 12.00am</td>
</tr>
<td>Class B</td>
<td>Mon</td>
<td>10.00am - 01.00pm</td>
</tr>
<td>Class C</td>
<td>Thu</td>
<td>04.00pm - 05.00pm</td>
</tr>
<td>Class D</td>
<td>Fri</td>
<td>01.00pm - 02.00pm</td>
</tr>
</table>
<br/>
<label>Class: </label><input type="text"/> <input type="button" value="Add"/>
</div>
<table>
</body>
</html>
最佳答案
我建议将this与that混合使用。两者都是Darko Bunic编写的JavaScript表插件。