JavaScript/jQuery强制Tab键跳过动态表上的字段

我有一张动态的桌子。行上的最后一项是用于删除行的href。如果用户在最后一项之前的字段中按tab键，将创建一个新行。这个很好用。但我需要光标转到新行的第一个字段。我无法专注于新行的第一个字段。光标只需转到href delete按钮

下面是HTML和PHP。可以首先从数据库表中填写表单。因此，原始ItemCount$i变量

相关功能位于“EndCell按键”下。

这里有初始化时的初始行和可能的附加行

<div class="parent-group">
    <div class="form-group">
        <div>
            <input type="text" id="FieldA(0)" name="FieldA[0]" />
        </div>
        <div>
            <input name="Field(0)B" id="FieldB[0]" />
        </div>
        <div>
            <input type="checkbox" id="FieldC(0)" name="FieldC[0]" />
        </div>
        <div>
            <input type="text" id="FieldD(0)" name="FieldD[0]" />
        </div>
    </div>   
    <div class="form-group">
        <a class="RowDeleteButton del" id="DeleteRow" href="javascript:void(0)"> X </a>
    </div>
</div>
<div id="container">
<?PHP
$ItemCount = count($FieldC);
if(!empty($_REQUEST['i']) || $ItemCount > 1)
{
    for($i=1;$i<$ItemCount;$i++)
    {
        echo('
        <div class="child-group">
            <div class="form-group">
                <div>
                    <input type="text" id="FieldA('.$i.')" name="FieldA['.$i.']" />
                </div>
                <div>
                    <input type="text" id="FieldB('.$i.')" name="FieldB['.$i.']" />
                </div>
                <div>
                    <input type="checkbox" id="FieldC('.$i.')" name="FieldC['.$i.']" />
                </div>
                <div>
                    <input type="text" id="FieldD('.$i.')" name="FieldD['.$i.']" class="EndCell" data-datarow='.$i.'/>
                </div>
            </div>   
            <div class="form-group">
                <a class="RowDeleteButton del Row'.$i.'" id="DeleteRow" href="javascript:void(0)"> X </a>
            </div>
        </div>   
        ');
    }
}
?>

JavaScript

<script type="text/javascript">
$(document).ready(function()
{
    $('#DeleteRow').closest('.form-group').hide();
    // ======================================== //
    //           I T E M S  L I S T             //
    // ======================================== //
    <?PHP
    if(!empty($_REQUEST['i']) || $ItemCount > 0)
    {
        echo('window.LastArrayValue = '.(count($FieldC)-1).';'."\n");
    }
    else
    {
        echo('window.LastArrayValue = 0;'."\n");
    }
    ?>
    // ======================================== //
    //       C R E A T E  N E W  R O W          //
    // ======================================== //
    function CreateNewRow()
    {
        var len = window.LastArrayValue;
        window.LastArrayValue = len + 1;
        $('.parent-group').clone(true, true).find(':input').each(function(idx, ele)
        {
            var ename = ele.name;
            var eid   = ele.id
            var ArrayValue = len+1;
            ele.name = ename.replace(/(\[\/?[^\]]*\])/g, "["+ArrayValue+"]");
            ele.id   = eid.replace(/(\(\/?[^\]]*\))/g, "("+ArrayValue+")");
            if(ele.type == "checkbox"){ele.checked = false;}
            else{ele.value = '';}
        }).end().find('.form-group').toggle(true).end()
          .toggleClass('parent-group child-group').hide()
          .appendTo('#container').slideDown('slow');
    }
    // ======================================== //
    //              A D D  R O W                //
    // ======================================== //
    $('#AddRow').on('click', function(e)
    {
        var ChildCount = $('.child-group').length;
        if(ChildCount == 7)
        {
            alert("Sorry, 8 is the maximum number of rows");
        }
        else
        {
            CreateNewRow();
        }
    });
    // ======================================== //
    //           D E L E T E  R O W             //
    // ======================================== //
    $('.del').on('click', function(e)
    {
        var jsonData = $(this).closest('.child-group, .parent-group')
        .find(':input:not(button)').get()
        .reduce(function(acc, ele)
        {
           acc[ele.name || ele.id] = ele.value;
           return acc;
        }, {});
        $(this).closest('.child-group, .parent-group').remove();
    });
    // ======================================== //
    //     E N D C E L L  K E Y P R E S S       //
    // ======================================== //
    $('.EndCell').on('keydown', function(e)
    {
        var KeyCode = e.keyCode;
        if(KeyCode == 9)
        {
            var DataRow = $(this).data("datarow");
            var ChildCount = $('.child-group').length;
            if(DataRow == ChildCount && ChildCount < 7)
            {
                CreateNewRow();
                var V = "FieldD("+window.LastArrayValue+")";
                $("#"+V).focus();
            }   
        }
    });
});
</script>

$（文档）.ready（函数（）
{
$（'#DeleteRow'）。最近（'.form group'）。隐藏（）；
// ======================================== //
//我是我的//
// ======================================== //
// ======================================== //
//C R E A T E E W R O W//
// ======================================== //
函数CreateNewRow（）
{
var len=window.LastArrayValue；
window.LastArrayValue=len+1；
$（'.parent group'）。克隆（true，true）。查找（':input'）。每个（函数（idx，ele）
{
var ename=ele.name；
var eid=ele.id
var ArrayValue=len+1；
ele.name=ename.replace（/（\[\/？[^\]]*\]）/g，“[”+ArrayValue+“]”）；
ele.id=eid.replace（/（\（\/？[^\]]*\）/g，（“+ArrayValue+”）；
如果（ele.type==“checkbox”）{ele.checked=false；}
else{ele.value=''；}
}).end（）.find（'.form group'）.toggle（true）.end（）
.toggleClass（'parent-group-child-group'）.hide（）
.appendTo（“#container”）.slideDown（'slow'）；
}
// ======================================== //
//D D R O W//
// ======================================== //
$（'#AddRow'）。在（'click'，函数（e）上
{
var ChildCount=$（'.child group'）.length；
if（ChildCount==7）
{
警报（“对不起，8是最大行数”）；
}
其他的
{
CreateNewRow（）；
}
});
// ======================================== //
//D E L E T R O W//
// ======================================== //
$（'.del'）。在（'click'，函数（e）上
{
var jsonData=$（this）.closest（'.child-group，.parent-group'）
.find（':input:not（按钮）'）.get（）
.减少（功能（acc、ele）
{
acc[ele.name | | ele.id]=ele.value；
返回acc；
}, {});
$（this）.closest（'.child group，.parent group'）.remove（）；
});
// ======================================== //
//E N D C E L K Y P R E S//
// ======================================== //
$（'.EndCell'）。on（'keydown'，函数（e）
{
var-KeyCode=e.KeyCode；
if（KeyCode==9）
{
var DataRow=$（this）.data（“DataRow”）；
var ChildCount=$（'.child group'）.length；
if（DataRow==ChildCount&&ChildCount<7）
{
CreateNewRow（）；
var V=“FieldD（“+window.LastArrayValue+”）；
$（“#”+V.focus（）；
}   
}
});
});

动态字段使用括号（例如：FieldName（1）），具体取决于行号。这会产生语法错误，无法识别的表达式：#FieldName（3）

（

和

）

在CSS中有一个特殊的含义，因此如果您想在选择器中使用它们并具有其字面意义，则需要对它们进行转义。（有关这方面的更多详细信息，请参见）这也适用于将CSS选择器与JavaScript或jQuery方法一起使用的地方

在本例中，在它们前面加上反斜杠，

\（

和

\）

，就足够了

兔子： 这是解决办法。 将类“FirstCell”添加到FieldA 换行

.appendTo（“#container”）.slideDown（'slow'）

到

---

（

和

）

在CSS中有一个特殊的含义，因此如果您想在选择器中使用它们并具有其字面意义，则需要对它们进行转义。在这种情况下，用反斜杠对它们进行预处理就足够了@谢谢！这似乎解决了这个问题。第二个问题的哪一部分是你特别想解决的？识别位于正确位置的tab键不起作用吗？找到要设置焦点的正确字段？还有别的吗？美元（“#FieldA（x）”）.focus（）；，现在的定义似乎是正确的，但它没有关注该字段。在处理

keydown

事件时，可能需要添加

preventDefault

调用？如果不阻止按tab键的默认操作，则可能会在之后直接“撤消”在其他位置设置焦点的尝试。当然，主要问题仍然存在。我可能应该把这分成两个问题，但我不知道它们是否相关。忽略上面的评论。答案已编辑完成。有关括号和反斜杠的讨论与此无关。这不是导致错误的问题。。。

.appendTo('#container').slideDown('slow',function()
{
    $("#container").find(".FirstCell").last().focus();
});