Добрый день!
Мне на странице надо иметь возможность динамически добавить строчки в таблицу (в примере ниже работает нормально), и дать возможность перехода между полями таблицы при помощи стрелок навигации на клавиатуре (работает не вполне правильно). Проблема в том, что навигация при помощи стрелок между полями таблицы работает только в полях таблицы, которые уже имелись на странице в html (см. код таблицы ниже), а в добавленных через JS строчках таблицы навигация между полями таблицы не работает! Хотя строчки добавляются правильно, т.е. внутри самой таблицы (в рамках tbody) и с правильно сформированным идентификатором полей (т.е. prevagebeg4, prevageend4, prevnumerator4 и т.д.). И при нажатии на стрелку "вниз" на третьей строчке таблицы осуществляется переход на добавленную через JS строку - т.е. браузер понимает что добавленная строка существует, и поле в ней имеет соответствующее имя.
Подскажите пожалуйста, как исправить скрипт чтобы и в добавленных через JS строчках таблицы навигация стрелками с клавиатуры работала правильно?
На странице две JS-функции:
1. Добавление строк в таблицу
<script language="JavaScript">
<!-- ;
var counterprev = 3; // сколько рядов в таблице уже есть
function moreFields(){
// добавляет новую строчку в конец таблицы
counterprev++;
c = counterprev;
var newFields = '<tr><td><input type="text" name="prevagebeg" size="3" value="" id="prevagebeg' + c + '"/ class=ftde_agebeg></td> \
<td><input type="text" name="prevageend" size="3" value="" id="prevageend' + c + '"/ class=ftde_ageend></td> \
<td><input type="text" name="prevnumerator" size="5" value="" id="prevnumerator' + c + '"/ class=ftde_numerator></td> \
</tr>';
$('#prevtable > tbody:last-child').append(newFields);
}
// end hide -->
</script>
2. Навигация по полям таблицы при помощи стрелок вперед/назад/вверх/вниз с клавиатуры
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$('#prevtable input').keydown(function(e) {
var td;
switch (e.keyCode) {
case 39: // right
td = $(this).parent('td').next();
break;
case 37: // left
td = $(this).parent('td').prev();
break;
case 40: // down
var i = $(this).parent().index() + 1;
td = $(this).closest('tr').next().find('td:nth-child(' + i + ')');
break;
case 38: // up
var i = $(this).parent().index() + 1;
td = $(this).closest('tr').prev().find('td:nth-child(' + i + ')');
break;
case 13: // enter
td = $(this).parent('td').next();
break;
}
td.find('input').focus();
});
</script>
Сама таблица выглядит так:
<table border=0 cellspadding=0 cellspacing=2 id="prevtable">
<tbody>
<tr>
<td class=ftde_agebeg>Начало</td>
<td class=ftde_ageend>Конец</td>
<td class=ftde_numerator>Показатель</td>
</tr>
<tr>
<td><input type="text" name="prevagebeg1" size="3" value="20" id="prevagebeg1" class=ftde_agebeg/></td>
<td><input type="text" name="prevageend1" size="3" value="40" id="prevageend1" class=ftde_ageend/></td>
<td><input type="text" name="prevnumerator1" size="5" value="523" id="prevnumerator1" class=ftde_numerator/></td>
</tr>
<tr>
<td><input type="text" name="prevagebeg2" size="3" value="41" id="prevagebeg2" class=ftde_agebeg/></td>
<td><input type="text" name="prevageend2" size="3" value="60" id="prevageend2" class=ftde_ageend/></td>
<td><input type="text" name="prevnumerator2" size="5" value="723" id="prevnumerator2" class=ftde_numerator/></td>
</tr>
<tr>
<td><input type="text" name="prevagebeg3" size="3" value="61" id="prevagebeg3" class=ftde_agebeg/></td>
<td><input type="text" name="prevageend3" size="3" value="80" id="prevageend3" class=ftde_ageend/></td>
<td><input type="text" name="prevnumerator3" size="5" value="851" id="prevnumerator3" class=ftde_numerator/></td>
</tr>
</tbody>
</table>
<a href="javascript:moreFields();">Добавить ещё один ряд</a><br>
