मेरे पास एक गतिशील तालिका है। एक पंक्ति पर अंतिम आइटम एक href है जिसका उपयोग किसी पंक्ति को हटाने के लिए किया जाता है। यदि उपयोगकर्ता अंतिम आइटम से पहले फ़ील्ड में टैब कुंजी दबाता है, तो एक नई पंक्ति बनाई जाती है। यह ठीक काम करता है। लेकिन मुझे नई पंक्ति में पहले क्षेत्र में जाने के लिए कर्सर की आवश्यकता है। मैं नई पंक्ति में पहले क्षेत्र पर ध्यान केंद्रित नहीं कर सकता। कर्सर बस href डिलीट बटन पर जाता है

यहाँ HTML और PHP है। फॉर्म को पहले डेटाबेस टेबल से भरा जा सकता है। इस प्रकार, मूल ItemCount $i चर।

विचाराधीन फ़ंक्शन "EndCell Keypress" के अंतर्गत है

तो, आपके पास आरंभिक पंक्ति और आरंभीकरण पर संभावित अतिरिक्त पंक्तियाँ हैं।

<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>   
        ');
    }
}
?>

जावास्क्रिप्ट

<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 अक्टूबर 2019, 11:39

1 उत्तर

सबसे बढ़िया उत्तर

डायनामिक फ़ील्ड पंक्ति संख्या के आधार पर कोष्ठक (जैसे: फ़ील्डनाम (1)) का उपयोग करते हैं। यह सिंटैक्स त्रुटि, अपरिचित अभिव्यक्ति उत्पन्न करता है: #FieldName(3)

CSS में ( और ) का एक विशेष अर्थ है, इसलिए यदि आप उन्हें एक चयनकर्ता में उपयोग करना चाहते हैं और उनका शाब्दिक अर्थ है, तो आपको उनसे बचना होगा। (उस पर अधिक विवरण https://mathiasbynens.be/notes/css-escapes) यह उन जगहों पर लागू होता है जहां आप CSS चयनकर्ताओं का उपयोग JavaScript या jQuery विधियों के साथ भी करते हैं।

उन्हें बैकस्लैश, \( और \) के साथ उपसर्ग करना, इस उदाहरण में पर्याप्त होना चाहिए।

खरगोश: यहाँ समाधान है। फील्डए में "फर्स्टसेल" वर्ग जोड़ा गया लाइन बदलता है

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

प्रति

.appendTo('#container').slideDown('slow',function()
{
    $("#container").find(".FirstCell").last().focus();
});
1
RationalRabbit 28 अक्टूबर 2019, 15:32