10

私はいくつかの関連する質問に目を通しましたが、どれも私の問題を理解するのに役立ちませんでした。

データの行やフィールド列を追加/削除できる独自の動的データグリッドフォームを最初から作成しています。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>
4

1 に答える 1

2

私が言えることは、追加されている入力クラスにクラスが含まれていない_fieldためです。

于 2014-06-13T21:58:44.350 に答える