javascript - JavaScript/jQuery Force Tab Key to Skip Field On Dynamic Table

Question

I have a dynamic table. The last item on a row is an href that is used to delete a row. If the user presses the tab key in the field before the last item, a new row is created. This works fine. But I need the cursor to go to the first field in the new row. I cannot focus on the first field in the new row. The cursor simply goes to the href delete button

Here is the HTML and PHP. The form may first be filled from a database table. Thus, the original ItemCount $i variable.

The function in question is under "EndCell Keypress"

So, you have here the initial row and possible additional rows on initialization.

<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>

标签： javascriptphpjquery

Answer 1

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

(并且)在 CSS 中有特殊的含义，所以如果你想在选择器中使用它们并具有它们的字面意义，你需要对它们进行转义。（可以在https://mathiasbynens.be/notes/css-escapes下找到更多详细信息）这也适用于您使用带有 JavaScript 或 jQuery 方法的 CSS 选择器的地方。

在这种情况下，在它们前面加上反斜杠\(和\), 就足够了。

兔子： 这就是解决方案。将“FirstCell”类添加到 FieldA 更改行

.appendTo('#container').slideDown('slow');

至

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