我有一个带有时间表的表,用户需要在其中选择一个或多个选项来选择要预定的时间。我想通过拖动突出显示的单元格来实现这一点。问题是我不知道如何通过单击一个来自动选择两个单元格(或通过拖动到下一个单元格来选择多个单元格)
我尝试了一些jQuery插件,但它们无法正常工作。有了它们,用户可以选择一个单元格,这是不合适的
例如,如果用户选择11:00,则不仅必须选择11:00的td,还必须选择下一个(或更多,取决于用户要预订的小时数)
<table id="daily" class="example_default getArray" cellspacing="0" cellpadding="0">
<tr>
<td>7:00</td>
<td>8:00</td>
<td class="ignore">9:00</td>
<td class="ignore">10:00</td>
</tr>
<tr>
<td>11:00</td>
<td>12:00</td>
<td>13:00</td>
<td>14:00</td>
</tr>
</table>
最佳答案
也许使用next()
和not
运算符可以帮助实现这一目标,
$('td:not(.ignore)').on('click', (e) => {
$('.selected').removeClass('selected');
$(e.currentTarget).addClass('selected');
$(e.currentTarget).next('td:not(.ignore)').addClass('selected');
});
.selected {
background: red;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<table id="daily" class="example_default getArray" cellspacing="0" cellpadding="0">
<tr>
<td>7:00</td>
<td>8:00</td>
<td class="ignore">9:00</td>
<td class="ignore">10:00</td>
</tr>
<tr>
<td>11:00</td>
<td>12:00</td>
<td>13:00</td>
<td>14:00</td>
</tr>
</table>