به دست آوردن مقدار یک فیلد از ردیف بعدی جدول با استفاده از jquery یا js

سلام.
وقتی یک ردیف از جدول را ویرایش می کنم، index آن سطر را دارم. حالا می‌خواهم مقدار یک فیلد را از ردیف بعدی (مانند Item_Percentage) به دست بیارم.
من کد زیر را نوشتم اما همیشه undefined برمی گردد.
لطفا راهنمایی کنید.
توجه: ممکن است index سطرها متوالی نباشد

https://jsfiddle.net/L4froxty/1/

جدول:

<table id="Itemdatatable" class="table table-striped table-hover">        

            <thead>            

            <tr>                

                <th>Row</th>

                <th>Col1</th>                

                <th>Col2</th>  

        <th> operation </th>          

            </tr>        

            </thead>        

                <tbody>                

                    <tr>                                        

                        <input id="Items_Index" name="Items.Index" type="hidden" value="0">

                        <input name="Items[0].Item_InvoiceID" type="hidden" value="41446">                        

                        <input name="Items[0].Item_StoreID" type="hidden" value="6">

                        <input name="Items[0].Item_Percentage" type="hidden" value="0">                    

                        <td> 1 </td>   

                        <td> aaaa </td>

                        <td> bbbb </td>

        <td> <a href="#" onclick="EditItemRow(0)">Edit</a> </td>                  

                    </tr>

             

             

                    <tr>                                        

                        <input id="Items_Index" name="Items.Index" type="hidden" value="1">                    

                        <input name="Items[1].Item_InvoiceID" type="hidden" value="55546">                        

                        <input name="Items[1].Item_StoreID" type="hidden" value="13">

    <input name="Items[1].Item_Percentage" type="hidden" value="10">                    

                        <td>2</td>

                        <td>cccc</td>

                        <td>ddd</td>   

        <td><a href="#" onclick="EditItemRow(1)">Edit</a></td>                  

                    </tr>                

                         

                </tbody>    

            </table>

        

        

        

            function EditItemRow(rowIndex)

            {

             var currentRow = $('table#Itemdatatable').find('tr').eq(rowIndex);

            var nextRowIndex = $(currentRow).next().find('input[name="Items.Index"]').val();

           var percent = $('input[name="Items[' + nextRowIndex + '].Item_Percentage"]').val();

    alert(percent);

            }

سلام و روز خوش

1- شما یک tr هم در thead دارین که اون هم حساب میشه،
باید از tbody شروع کنین.

2- اون next هم پوینتر رو میبره رو tr بعدی و نباید باشه:

با استفاده از jQuery

        function EditItemRow(rowIndex) {

            const percent = $('#Itemdatatable tbody tr').eq(rowIndex)

                .find($('input[name$="Item_Percentage"]')).val();

            alert(percent);

        }

        function EditItemRow(rowIndex) {

            const percent = $(`input[name$="Items[${rowIndex}].Item_Percentage"]`).val();

            alert(percent);

        }

جاوااسکریپت خالص

function EditItemRow(rowIndex) {

    const currentRow=document.querySelectorAll("#Itemdatatab  le tbody tr")[rowIndex];

    const percent = currentRow.querySelector('input[name$="Item_Percentage"]').value;

    alert(percent);

}

        function EditItemRow(rowIndex) {

            const percent = document.querySelector(`input[name$="Items[${rowIndex}].Item_Percentage"]`).value;

            alert(percent);

        }

یک راه دیگه این هست که اصلا rowIndex استفاده نکنین،
و از روی activeElement (که اینجا المان a هست)، tr رو پیدا کنین:

        function EditItemRow() {

            const currentRow = document.activeElement.parentElement.parentElement  ;

            const percent = currentRow.querySelector('input[name$="Item_Percentage"]').value;

            alert(percent);

        }

    <table id="Itemdatatable" class="table table-striped table-hover">

        <thead>

            <tr>

                <th>Row</th>

                <th>Col1</th>

                <th>Col2</th>

                <th> operation </th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <input id="Items_Index" name="Items.Index" type="hidden" value="0">

                <input name="Items[0].Item_InvoiceID" type="hidden" value="41446">

                <input name="Items[0].Item_StoreID" type="hidden" value="6">

                <input name="Items[0].Item_Percentage" type="hidden" value="0">

                <td> 1 </td>

                <td> aaaa </td>

                <td> bbbb </td>

                <td> <a href="#" onclick="EditItemRow()">Edit</a> </td>

            </tr>

            <tr>

                <input id="Items_Index" name="Items.Index" type="hidden" value="1">

                <input name="Items[1].Item_InvoiceID" type="hidden" value="55546">

                <input name="Items[1].Item_StoreID" type="hidden" value="13">

                <input name="Items[1].Item_Percentage" type="hidden" value="10">

                <td>2</td>

                <td>cccc</td>

                <td>ddd</td>

                <td><a href="#" onclick="EditItemRow()">Edit</a></td>

            </tr>

        </tbody>

    </table>

پ.ن:

الان این داکیومنت html سمت سرور ایجاد شده؟

اگر اینجور هست و خودتون هم میسازین چند نکته به نظر میاد:

1- برای یک سری از inputها از id یکسان استفاده شده: Items_Index
البته تا زمانی که نرین سراغش مشکلی ایجاد نمیکنه - ولی به هر حال نادرسته.

2- میتونین برای inputها به جای name از id و با عبارتهای ساده تر استفاده کنین،
این به کدنویسی ساده تر منجر میشه:

Percentage_00

InvoiceID_25

نقل قول:

---

نوشته شده توسط mazoolagh

سلام و روز خوش

1- شما یک tr هم در thead دارین که اون هم حساب میشه،
باید از tbody شروع کنین.

2- اون next هم پوینتر رو میبره رو tr بعدی و نباید باشه:

با استفاده از jQuery

        function EditItemRow(rowIndex) {

            const percent = $('#Itemdatatable tbody tr').eq(rowIndex)

                .find($('input[name$="Item_Percentage"]')).val();

            alert(percent);

        }

---

ممنون از زمانی که گذاشتین و به صورت کامل کدها رو گذاشتین

بنده میخوام مقدار Item_Percentage مربوط به ردیف بعدی رو بخونم نه همون ردیفی که روش کلیک شده.

پس کافی هست از rowindex+1 استفاده کنین.

فقط حواستون به آخرین tr باشه!
الان وضعیتش مشخص نیست که کدوم item_percentage رو باید بگیره.

مشکل همین جاست که ایندکس‌ها به صورت متوالی نیستند

نقل قول:

---

نوشته شده توسط resident

مشکل همین جاست که ایندکس‌ها به صورت متوالی نیستند

---

خب نمونه ای که گذاشتین این رو نشون نمیده!

خوبه که همین الان یک موردی رو مشخص کنین چون مبهم هست:
منظور از ردیف بعدی آیا tr بعدی هست،
یا rowindex بعدی (ولی این rowindex+1 میتونه در هر trی باشه)؟

نمونه رو گسترش بدین تا مشخص باشه.
و تکلیف آخرین tr هم باید مشخص باشه.