Saya memiliki tabel dinamis. Item terakhir pada baris adalah href yang digunakan untuk menghapus baris. Jika pengguna menekan tombol tab di bidang sebelum item terakhir, baris baru dibuat. Ini bekerja dengan baik. Tapi saya perlu kursor untuk pergi ke bidang pertama di baris baru. Saya tidak bisa fokus pada bidang pertama di baris baru. Kursor hanya menuju ke tombol href delete

Berikut HTML dan PHP-nya. Formulir pertama-tama dapat diisi dari tabel database. Jadi, variabel ItemCount $i asli.

Fungsi yang dimaksud ada di bawah "EndCell Keypress"

Jadi, Anda memiliki di sini baris awal dan kemungkinan baris tambahan pada inisialisasi.

<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>
-1
RationalRabbit 28 Oktober 2019, 11:39

1 menjawab

Jawaban Terbaik

Bidang dinamis menggunakan tanda kurung (misalnya: FieldName (1)), tergantung pada nomor baris. Ini menghasilkan kesalahan Sintaks, ekspresi tidak dikenal: #FieldName(3)

( dan ) memiliki arti khusus dalam CSS, jadi jika Anda ingin menggunakannya dalam pemilih dan memiliki arti literalnya, Anda harus menghindarinya. (Detail lebih lanjut tentang itu dapat ditemukan di https://mathiasbynens.be/notes/css-escapes) Ini berlaku untuk tempat di mana Anda menggunakan pemilih CSS dengan metode JavaScript atau jQuery juga.

Mengawalinya dengan garis miring terbalik, \( dan \), sudah cukup dalam hal ini.

Kelinci: Inilah solusinya. Menambahkan kelas "FirstCell" ke FieldA Mengubah garis

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

Untuk

.appendTo('#container').slideDown('slow',function()
{
    $("#container").find(".FirstCell").last().focus();
});
1
RationalRabbit 28 Oktober 2019, 12:32