私はいくつかの関連する質問に目を通しましたが、どれも私の問題を理解するのに役立ちませんでした。
データの行やフィールド列を追加/削除できる独自の動的データグリッドフォームを最初から作成しています。Enterキーを押すと新しいフィールド列が作成され、それ。これまでにこれを行うコードは次のとおりです。
$('#data_fields').on('keydown','._field',function(e){
if(e.which==13)
{
$('#addfield').click();
var o=$(this).parent().parent();
var l=$(o).children().length-2;
var f=$(o).find("td:eq("+l+")").find("._field");
$(f).focus();
}
});
#addfield
クリックするとフィールド列を追加するボタンです。
._field
フィールドの名前が書き込まれる入力ボックスです。
#data_fields
._field
入力ボックスを含むセルを含むtrです。
ただし、._field
新しい列の入力ボックスには、特別なスーパーエレメントのキーダウン機能はありません。さらに、の('#data_fields')
セレクターを.on()
に変更すると(document)
、現在の要素にキーダウンコールバックさえ与えられません。
これがHTMLです。少し面倒ですが、PHPなどでテンプレートを使用しています。
<thead id="doc_fields">
<tr id="delrow">
<tr id="data_fields">
<td style="padding:2px"><input class="_field" type="text" onkeyup="sync_doc_table();" onchange="sync_doc_table();" style="width:90%" value="" name="Fields[]"></td>
<td style="padding:2px"><input class="_field" type="text" onkeyup="sync_doc_table();" onchange="sync_doc_table();" style="width:90%" value="b" name="Fields[]"></td>
<td style="padding:2px"><input type="text" style="width:90%" value="" name="Fields[]" onchange="sync_doc_table();"></td>
<td style="padding:2px"><input type="text" style="width:90%" value="" name="Fields[]" onchange="sync_doc_table();"></td>
<td id="addcol" class="midi" style="width:25px" rowspan="3">
<a id="addfield" onclick="inscol('#addcol','<td style=\'padding:2px\'><input onchange=\'sync_doc_table();\' type=\'text\' name=\'Fields[]\' value=\'\' style=\'width:90%\' /></td>');addcol('#typerow','<td><select name=\'Type[]\' style=\'width:91%\'><option value=\'integer\'>integer</option><option value=\'double\'>double</option><option value=\'string\' selected=\'selected\'>string</option></select></td>');addcol('#delrow','<td class=\'center _delly\'><a href=\'#\' onclick=\'del_doc_field($(this).parent());return false;\'><img src=\'/images/icons/x.png\' alt=\'[Del]\' /></a></td>');$('._colsp').attr('colspan', $('#addrow').attr('colspan') + 1);$('<td><input type=\'text\' name=\'Data[][]\' value=\'\' style=\'width:90%\' /></td>').insertBefore('.datarow ._delly');return false;" href="#">
</td>
</tr>
<tr id="typerow">
</thead>