كيفية قفل الصف الأول والعمود الأول من جدول التمرير باستخدام جافا سكريبت

قفل الصف الأول والعمود الأول من الجدول عندما يمكن أن يكون التمرير ميزة مفيدة للجداول الكبيرة التي تحتوي على معلومات مهمة في الأعلى واليسار. في حين أن CSS وحدها لا يمكنها تحقيق ذلك، فإن JavaScript تقدم حلاً.

فكر في المكون الإضافي fxdHdrCol كحل محتمل لـ JavaScript. يقوم هذا البرنامج المساعد بتحويل جدول HTML القياسي إلى جدول قابل للتمرير مع رؤوس وأعمدة جدول ثابتة. فهو يسمح للجدول بالتمرير أفقيًا وعموديًا مع الحفاظ على الصف الأول والعمود الأول في مكانهما.

لاستخدام fxdHdrCol، ما عليك سوى تمرير المعلمات التالية إلى البرنامج الإضافي:

$('#myTable').fxdHdrCol({
    fixedCols    : 3,       /* 3 fixed columns */
    width        : "100%",  /* set the width of the container (fixed or percentage)*/
    height       : 500      /* set the height of the container */
});

من خلال تحديد معلمة FixedCols، يمكنك تحديد عدد الأعمدة الثابتة في الجدول. يمكنك أيضًا ضبط عرض الحاوية وارتفاعها لتناسب الجدول.

للحصول على عرض توضيحي كامل وتوثيق، راجع الرابط المقدم في الرد الأصلي. يقوم هذا الحل بتأمين الصف الأول والعمود الأول من الجدول بشكل فعال، مما يوفر تجربة تمرير أكثر سهولة في الاستخدام.