我有日历html表,想要先点击选择开始日期,然后再点击选择结束日期。直到我点击结束日期,它必须显示从开始日期到光标位置的范围。如果我选择的tds在同一个tr中,所有这些都有效。请帮我在ant tr中选择tds。感谢
$(document).ready(function() {
$('td.day').click(function() {
if ($("td.firstClick").length == 0) {
$(this).addClass("firstClick");
}
});
$('td.day').hover(function() {
$(this).addClass("secondClick");
$("td.firstClick").nextUntil(this).addClass("selected");
});
$('td.day').mouseleave(function() {
$(this).removeClass("secondClick");
$("td.firstClick").nextUntil(this).removeClass("selected");
});
$('td.secondClick').click(function() {
$('.selected').addClass('reserved');
});
});

table {
border-collapse: collapse;
}
table tr td {
width: 14%;
}
table tr td:hover {
cursor: pointer;
}
.firstClick {
background: green;
}
.selected {
background: lightgreen;
}
.reserved {
background: red !important;
}
.secondClick {
background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td colspan="7"><b>2016</b>
</td>
</tr>
<tr>
<td colspan="7"><i>November</i>
</td>
</tr>
<tr>
<th>mon</th>
<th>tue</th>
<th>wed</th>
<th>thu</th>
<th>fri</th>
<th>sat</th>
<th>sun</th>
</tr>
<tr>
<td></td>
<td class="day">1</td>
<td class="day">2</td>
<td class="day">3</td>
<td class="day">4</td>
<td class="day">5</td>
<td class="day">6</td>
</tr>
<tr>
<td class="day">7</td>
<td class="day">8</td>
<td class="day">9</td>
<td class="day">10</td>
<td class="day">11</td>
<td class="day">12</td>
<td class="day">13</td>
</tr>
<tr>
<td class="day">14</td>
<td class="day">15</td>
<td class="day">16</td>
<td class="day">17</td>
<td class="day">18</td>
<td class="day">19</td>
<td class="day">20</td>
</tr>
<tr>
<td class="day">21</td>
<td class="day">22</td>
<td class="day">23</td>
<td class="day">24</td>
<td class="day">25</td>
<td class="day">26</td>
<td class="day">27</td>
</tr>
<tr>
<td class="day">28</td>
<td class="day">29</td>
<td class="day">30</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
&#13;
答案 0 :(得分:1)
您可以使用.index()
和.filter()
来获取目标元素。
//Cache elements
var tds = $('td.day');
var firstClick = $(".firstClick");
//Get of various elements
var firstClickIndex = tds.index(firstClick);
var currentIndex = tds.index(this);
//Filter element where index is greater that firstClick and less-than equal to clicked element index
var filteredElements = tds.filter(function() {
var idx = tds.index(this);
return idx >= firstClickIndex && idx <= currentIndex;
});
//Perform the desired operation
filteredElements.addClass("selected")
生成元素操作选择器时使用Event Delegation(如删除和添加类)。
$('table').on('click', 'td.secondClick', function() {
$('.selected').addClass('reserved');
});
$(document).ready(function() {
$('td.day').click(function() {
if ($("td.firstClick").length == 0) {
$(this).addClass("firstClick");
}
});
$('td.day').hover(function() {
if ($("td.firstClick").length == 0) {
$(this).addClass("selected");
return;
}
$(this).addClass("secondClick");
var tds = $('td.day');
var firstClick = $(".firstClick");
var firstClickIndex = tds.index(firstClick);
var currentIndex = tds.index(this);
tds.filter(function() {
var idx = tds.index(this);
return idx >= firstClickIndex && idx <= currentIndex;
}).addClass("selected")
}, function() {
if ($("td.firstClick").length == 0) {
$(this).removeClass("selected");
return;
}
$(this).removeClass("secondClick");
var tds = $('td.day');
var firstClick = $(".firstClick");
var firstClickIndex = tds.index(firstClick);
var currentIndex = tds.index(this);
tds.filter(function() {
var idx = tds.index(this);
return idx >= firstClickIndex && idx <= currentIndex;
}).removeClass("selected")
});
$('table').on('click', 'td.secondClick', function() {
$('.selected').addClass('reserved');
});
});
table {
border-collapse: collapse;
}
table tr td {
width: 14%;
}
table tr td:hover {
cursor: pointer;
}
.firstClick {
background: green;
}
.selected {
background: lightgreen;
}
.reserved {
background: red !important;
}
.secondClick {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td colspan="7"><b>2016</b>
</td>
</tr>
<tr>
<td colspan="7"><i>November</i>
</td>
</tr>
<tr>
<th>mon</th>
<th>tue</th>
<th>wed</th>
<th>thu</th>
<th>fri</th>
<th>sat</th>
<th>sun</th>
</tr>
<tr>
<td></td>
<td class="day">1</td>
<td class="day">2</td>
<td class="day">3</td>
<td class="day">4</td>
<td class="day">5</td>
<td class="day">6</td>
</tr>
<tr>
<td class="day">7</td>
<td class="day">8</td>
<td class="day">9</td>
<td class="day">10</td>
<td class="day">11</td>
<td class="day">12</td>
<td class="day">13</td>
</tr>
<tr>
<td class="day">14</td>
<td class="day">15</td>
<td class="day">16</td>
<td class="day">17</td>
<td class="day">18</td>
<td class="day">19</td>
<td class="day">20</td>
</tr>
<tr>
<td class="day">21</td>
<td class="day">22</td>
<td class="day">23</td>
<td class="day">24</td>
<td class="day">25</td>
<td class="day">26</td>
<td class="day">27</td>
</tr>
<tr>
<td class="day">28</td>
<td class="day">29</td>
<td class="day">30</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>