UPD
Проблема в том,что при hover - е по ячейкам таблицы создается dropdownlist,и когда хочу выбрать из списка, то список скрывается и создается опять же новый список но при пересечений,то есть уже на другом, соседнем ячейке(не знаю как объяснить). Короче можно выбрать из списка только с помощью клавиатуры, кнопки вверх-вниз.
Понимаю что это из за td:hover
.
Добавить комментарий
|
2 ответа
Попробуйте:
$('#timetable').delegate('.sel', 'change', function () {
$(this).parent().html('selected');
})
вместо:
$('.sel').change(selChange);
function selChange() {
$(this).parent('td').html('selected');
}
Проблема в том, что Вы не подключаете обработчик событий к динамически созданным элементам.
-
-
можно и
on
просто меняется порядок аргументов, $('#timetable').on('change','.sel',function()– FLK16 авг 2012 в 8:02
Сделал вот так:
var beforeText = '';
var s = 0;
var afterText = '';
$('#timetable td').hover(function() {
if (s == 1) exit;
beforeText = $(this).text();
var sel = '<select class="sel"><option selected disabled>Выбрать</option><option value=9>Чел1</option><option value=6>Чел2</option><option value=8>Чел3</option> <option value=10>Чел4</option></select>';
$(this).html(sel).show('slow'); /*показываем список*/
}, function() {
if (s == 1) exit;
$(this).find('.sel').hide();
$(this).html(beforeText);
});
$('#timetable').delegate('.sel', 'change', function() {
beforeText = 'id=' + $(this).val();
$(this).parent('td').html(beforeText);
s = 0;
});
$('#timetable').delegate('.sel', 'click', function() {
s = 1;
});
.calendar-date {
min-width: 100px;
}
#timetable {
width: 900px;
border: 3px solid green;
margin-bottom: 5px;
padding: 1px;
word-wrap: break-word;
background-color: palegoldenrod;
}
#timetable tr.over td,
#timetable tr:hover td {
background: none repeat scroll 0 0 #BCD4EC;
}
#calendar {
margin-bottom: 5px;
margin-left: 20px;
margin-top: 20px;
width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="timetable" rules="all">
<tr>
<th>№</th>
<th>Январь</th>
<th>Февраль</th>
<th>Март</th>
<th>Апрель</th>
<th>Май</th>
<th>Июнь</th>
<th>Июль</th>
<th>Август</th>
<th>Сентябрь</th>
<th>Октябрь</th>
<th>Ноябрь</th>
<th>Декабрь</th>
</tr>
<tr>
<td><b>1</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>2</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>3</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>4</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>5</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>6</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>7</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>8</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>9</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>10</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>11</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>12</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>13</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>14</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>15</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>16</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>17</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>18</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>19</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>20</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>21</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'>2012-09-21</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>22</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>23</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'>2012-08-23</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'>2012-11-23</td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>24</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>25</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>26</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>27</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>28</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>29</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>30</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
<tr>
<td><b>31</b>
</td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
<td class='calendar-date'></td>
</tr>
</table>
-
тоже первая мысль была через глобальные флаги, но не нравится мне этот метод, какой то он неуклюжий..– FLK16 авг 2012 в 19:03
-