تغيير لون عمود الجدول عند اختيار خانات الاختيار باستخدام HTML و AngularJS

في هذا السياق، يهدف المستخدم إلى تغيير لون عمود الخانة عند النقر على الخانات الاختيارية في الجدول. يمكن تحقيق هذا الهدف باستخدام HTML و AngularJS. لتحقيق هذا الهدف، يجب أن يتم إضافة بعض التعليمات والسياق للكود المقدم.

في البداية، يُفضل إضافة متغير في نطاق المُشغل الخاص بك يُسمى، على سبيل المثال، selectedCheckboxes لتتبع الخانات التي تم اختيارها. يمكنك تحقيق ذلك باستخدام ng-model في الخانات الاختيارية:

htmlCopy code
<td><input type="checkbox" ng-model="selectedCheckboxes[user.id]" ng-click="updateCheckboxColor()">td>

ثم، يجب إنشاء دالة updateCheckboxColor() في نطاق المُشغل الخاص بك، والتي ستحدث اللون عندما يتم النقر على الخانات الاختيارية. يُفضل استخدام ng-class لتحديد الفئة التي تحتوي على أنماط CSS لتغيير اللون:

htmlCopy code
<td ng-class="{ 'selected-column': selectedCheckboxes[user.id] }">
    <input type="checkbox" ng-model="selectedCheckboxes[user.id]" ng-click="updateCheckboxColor()">
td>

ثم، قم بتعريف الفئة selected-column في CSS لتحديد لون العمود المحدد:

cssCopy code
.selected-column {
    background-color: #your-desired-color;
}

أخيرًا، يجب تعريف دالة updateCheckboxColor() في نطاق المُشغل الخاص بك، والتي ستحدث اللون بناءً على الخانات التي تم اختيارها:

javascriptCopy code
$scope.updateCheckboxColor = function() {
    // قم بتحديث الأكواد اللازمة هنا لتحديث اللون بناءً على selectedCheckboxes
}

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

لتحقيق الهدف الذي ورد، يجب أخذ عدة خطوات لتنفيذ التغيير في لون العمود عندما يتم اختيار الخانات الاختيارية. دعونا نستعرض بعض النقاط الهامة:

1. إضافة متغير لتتبع الخانات المختارة:
   يمكنك إضافة متغير إلى نطاق المُشغل الخاص بك لتتبع الخانات التي تم اختيارها. يمكن أن يكون هذا متغيرًا من نوع كائن JavaScript حيث يتم استخدام مفاتيح الكائن لتمثيل معرّفات المستخدم أو أي معرف فريد آخر.

   javascriptCopy code
   $scope.selectedCheckboxes = {};
   

2. تحديث نموذج البيانات لتضمين اللون:
   يمكنك توسيع نموذج البيانات الخاص بك ليشمل خاصية لتخزين حالة اللون لكل صف. على سبيل المثال:

   javascriptCopy code
   $scope.users = [
       { id: 1, name: 'User1', email: '[email protected]', type: 'Admin', lastActivity: new Date(), color: '' },
       // ... المزيد من المستخدمين
   ];
   

3. تحديث الخانات الاختيارية في الجدول:
   قم بتحديث الكود الخاص بالخانات الاختيارية في الجدول ليتم ربطها بالمتغير واللون:

   htmlCopy code
   <td ng-class="{ 'selected-column': selectedCheckboxes[user.id] }">
       <input type="checkbox" ng-model="selectedCheckboxes[user.id]" ng-click="updateCheckboxColor(user.id)">
   td>
   

4. تحديث الدالة المسؤولة عن تغيير اللون:
   قم بتحديث الدالة updateCheckboxColor لتحديث حالة اللون عند النقر على الخانات الاختيارية. يمكنك استخدام القيمة المرتبطة بالخانة الاختيارية لتحديث اللون في نموذج البيانات:

   javascriptCopy code
   $scope.updateCheckboxColor = function(userId) {
       $scope.users.forEach(function(user) {
           if (user.id === userId) {
               user.color = $scope.selectedCheckboxes[userId] ? '#your-selected-color' : '';
           }
       });
   };
   

5. تحديث الأنماط في CSS:
   قم بتحديث أنماط CSS لتحديد لون العمود المحدد وفقًا للاحتياجات:

   cssCopy code
   .selected-column {
       background-color: #your-selected-color;
   }
   

6. تحسين تصميم الجدول:
   لتحسين تصميم الجدول، يمكنك أيضًا استخدام تقنيات أخرى مثل AngularJS Directives أو AngularJS Services لجعل الكود أكثر هيكلة وصيانة.

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