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

[resident]

سلام.
وقتی یک ردیف از جدول را ویرایش می کنم، 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);
}

[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);
}

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

جاوااسکریپت خالص
function EditItemRow(rowIndex) {
const currentRow=document.querySelectorAll("#Itemdatatable 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);
}

[mazoolagh]

یک راه دیگه این هست که اصلا 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>

[mazoolagh]

پ.ن:

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

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

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

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


Percentage_00
InvoiceID_25

[resident]

سلام و روز خوش

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 مربوط به ردیف بعدی رو بخونم نه همون ردیفی که روش کلیک شده.

[mazoolagh]

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

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

[resident]

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

[mazoolagh]

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

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

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

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