نمایش جزییات هر رکورد در جدول جداگانه با یک کلیک توسط JavaScript

شما می تونید این کار رو توسط دستورات Html و Jquery انجام بدید.

در Table اول خودتون که اسمش رو جدول مستر گذاشتید برای هر tr یک data-attribute اضافه کنید. مقدار این data-attribute همون کلید اصلی جدول میتونه باشه. این کار باعث میشه هر رکورد یک شناسه منحصر بفرد داشته باشه و بتونید با کلیک روی اون رکورد این شناسه رو دریافت کنید و برای به دست آوردن اطلاعات detail یا رکوردهای child به شما کمک میکنه.

خاصیت data-attribute در Html چیست و چه کاربردی دارد؟

به مثال زیر توجه کنید :

<table>
   <thead>
      <tr>
         <td style="width:60px;">ردیف</td>
         <td style="width:30px;">نام</td>
      </tr>
   </thead>

   <tbody id="tablelist">
      @foreach (var item in Model)
      {
         <tr data-id="@item.Id">
            <td>@counter</td>
             <td>@item.Name</td>
         </tr>
      }
   </tbody>
</table>

همونطور که میبینید در تگ tr یک data-id قرار دادیم که Id یا همون کلیک اصلی رو به هر رکورد منحصرا میدیم. حالا توسط دستورات جی کوئری میتونید این مقدار رو دریافت کنید و اطلاعات رو توسط ایجکس از سمت سرور دریافت و در جدول دوم نمایش بدید.

<script>
   $("#tablelist tr").click(function () {
          var getVal = $(this).data("Id");
          // در ادامه این دستورات می توانید توسط آیدی به دست آمده و دستورات ایجکس اطلاعات را از دیتابیس دریافت کنید و در جدول دوم نمایش دهید
   
       )};
</script>