输入键以创建新行和焦点当前输入字段

时间:2016-03-17 06:54:13

标签: javascript jquery

DataTable table = new DataTable("tableName");

DataColumn c0 = new DataColumn("col1");
DataColumn c1 = new DataColumn("Col2");

table.Columns.Add(c0);
table.Columns.Add(c1);
foreach (CustomClass item in items)
{
    DataRow row;
    row = transTable.NewRow();
    row["col1"] = item.something;
    row["col2"] = item.something;
    transTable.Rows.Add(row);
}

datagridView.DataSource = table;

在此表单中最初关注第一个文本框,然后按输入密钥它会自动聚焦到死角的附近输入字段,同时我们按输入密钥然后创建新的行和焦点到新创建的行中显示的初始输入字段 之后,当我们按下回车键时,它不会聚焦到文本区附近,请帮助解决此问题 在第一行它正常工作,而我们进入第二行它不工作

请帮助

1 个答案:

答案 0 :(得分:2)

动态生成的元素需要event delegation,如下所示。

var i = $('table tr').length;

$(document).on('keyup', '.lst', function(e) {
  var code = (e.keyCode ? e.keyCode : e.which);
  if (code == 13) {
    html = '<tr>';
    html += '<td>' + i + '</td>';
    html += '<td><input type="text" class="inputs" name="name_' + i + '" id="name_' + i + '" /></td>';
    html += '<td><input type="text" class="inputs" name="age_' + i + '" id="age_' + i + '" /></td>';
    html += '<td><input type="text" class="inputs lst" name="phone_' + i + '" id="phone_' + i + '" /></td>';
    html += '</tr>';
    $('table').append(html);
    $(this).focus().select();
    i++;
  }
});

$(document).on('keydown', '.inputs', function(e) {
  var code = (e.keyCode ? e.keyCode : e.which);
  if (code == 13) {
    var index = $('.inputs').index(this) + 1;
    $('.inputs').eq(index).focus();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="500" border="1">
    <tr>
        <td>No.</td>
        <td>Name</td>
        <td>Age</td>
        <td>Phone</td>
    </tr>
    <tr>
        <td>1</td>
        <td><input type="text" class="inputs" name="name_1" id="name_1" /></td>
        <td><input type="text" class="inputs" name="age_1" id="age_1" /></td>
        <td><input type="text" name="phone_1" class="inputs lst" id="phone_1" /></td>
    </tr>
</table>