ما هي أفضل طريقة لتصميم الصفوف المتناوبة في الجدول؟
https://stackoverflow.com/questions/474216
-
19-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
من الواضح أن النمط الفعلي للصفوف الفردية/الزوجية سيتم تنفيذه عبر فئة CSS، ولكن ما هي أفضل طريقة "لإرفاق" الفئة بالصفوف؟هل من الأفضل وضعه في الترميز أم أنه من الأفضل القيام بذلك عبر جافا سكريبت من جانب العميل؟ما هو الافضل و لماذا؟
من أجل التبسيط، لنفترض أن هذا جدول كبير، يحتوي على 100 صف، وأن نظام الألوان يتناوب بين الصفوف الفردية والزوجية.بالإضافة إلى ذلك، هناك حاجة إلى نوع ما من مكتبة جافا سكريبت التي يمكنها القيام بذلك بسهولة في مكان آخر من الصفحة وبالتالي فإن الحمل الزائد لتلك الحزمة ليس عاملاً.
الهدف الحقيقي من هذا السؤال هو تحديد المقايضات المتضمنة وكذلك كيفية التعامل مع هذه المقايضات، مثل نتائج الأداء إلى الخادم إذا تم الضغط على الصفحة تحت التحميل (بافتراض جدول ديناميكي)، وضربات عرض النطاق الترددي للمستخدمين ذوي سرعات الاتصال المنخفضة، النتائج الدلالية عن طريق إضافة كود تخطيط إضافي إلى HTML (الفكرة هنا هي أن HTML مخصص للمحتوى، وCSS مخصص للتخطيط، وجافا سكريبت مخصص لكيفية سلوك المحتوى بالإضافة إلى التحكم/تعزيز التخطيط)
المحلول
ويمكنك القيام بذلك بسهولة إلى حد ما مع مسج، كما يلي:
$(function(){
$('tr:even').addClass('alternateClass');
$('tr:odd').addClass('mainClass');
});
ويمكنك التأهل محدد أكثر قليلا إذا كنت ترغب فقط في القيام بذلك على طاولة واحدة معينة، أو يفعل ذلك على عناصر "لى" كذلك.
وأعتقد أن هذا هو قليلا أكثر نظافة وأكثر قابلية للقراءة العميل من أنه سيكون في بعض البيئات من جانب الخادم،
نصائح أخرى
وكنت وضعت ذلك في (جانب الخادم) الترميز. فإنه يأخذ الخادم أقل من ميلي ثانية واحدة لاستكمال rowNum = (rowNum - 1) * -1 انها غيظ الحيوانات الأليفة من الألغام عند موقع على شبكة الانترنت بطيء بسبب كم جافا سكريبت يتم تنفيذه.
وكما قال في إجابات أخرى، والقيام على طاولة كبيرة على جانب العميل سيكون أبطأ من على جانب الملقم، وقد لا تعمل إذا كان جافا سكريبت المعوقين المستخدم.
ولكن استخدام إطار JS مثل مسج يجعل من السهل جدا أنه من المغري حقا:
$(document).ready(function() {
$('.myTable tr:odd').addClass('alternateRow');
});
لجدول مثل هذا الحجم الكبير وأود أن تفعل تجهيز صف واحد على جانب الخادم، وذلك باستخدام PHP أو ما شابه ذلك لحساب ل/ حتى أسماء فئة غريبة لكل صف. وهذا الحل بالنسبة لأولئك مع جافا سكريبت إيقاف وسيكون أداء أعلى بكثير من أي مكتبة جافا سكريبت معالجة عنصر الجدول من هذا الحجم.
في PHP فإن المنطق تبدو شيء من هذا القبيل
foreach($rows as $i => $row) {
$class = ($i % 2 == 0) ? 'even' : 'odd';
}
إذا كنت لا تستطيع أن تفعل أي معالجة من جانب الخادم أوصي وجود جافا سكريبت وضع العلامات الدرجة لكل صف بدلا من التلاعب أساليب مباشرة. يتم ترك هذه الطريقة يتم ترك عرضه على CSS والسلوك إلى تفعيل جافا سكريبت وإذا كنت تفعل تغيير الطريقة التي يتم إنشاؤها الطبقات في وقت لاحق سوف رمز العرض التقديمي تبقى نفسها.
وأود أن تفعل هذا في البداية من جانب الخادم منذ العميل قد لا يكون جافا سكريبت JavaScript. إذا كنت إضافة / إزالة صفوف من جانب العميل مع جافا سكريبت، فإنك قد ترغب في أيضا لديها القدرة على القيام بذلك على العميل بعد إضافة / إزالة الحدث قد اكتمل. بقدر الإمكان يجب أن تحاول أن يكون واجهة لديك تتصرف بشكل جيد بدون جافا سكريبت ما لم تتمكن من السيطرة على البيئة المتصفح (يقول، على سبيل المثال، في التطبيق الإنترانت حيث يمكنك أن تطلب أن يتم تمكين عليه).
ويوما ما، سنكون قادرين على مجرد استخدام نقية CSS . وبطبيعة الحال، وقدم هذا الجزء من مواصفات CSS في على 2001 و لا يزال غير معتمد. = (
ما تحاول تحقيقه يمكن تحقيقه باستخدام CSS3:
tr:nth-child(odd) { background: #FFF; }
tr:nth-child(even) { background: #AAA; }
وهذا مدرج أيضًا في مواصفات محددات CSS3 الخاصة بـ W3.إذا كنت تبحث عن التوافق، فإن إضافة جانب خادم الفصل أو من خلال جافا سكريبت سيكون حلاً أفضل بكثير.
وهذا يتوقف على السيناريو الخاص بك. جافا سكريبت استنادا قد يكون أسرع لتنفيذ لعدد من الصفوف إذا لم يتم إنشاء الجدول على ذبابة. إذا كنت تقوم بإنشاء الجدول الخاص بك حيوي، ومع ذلك، يمكن بسهولة جدا تعيين فئة كل صف أخرى لتكون "row_alternate" - لكنني أفضل طريقة جانب الخادم إذا كنت تشعر بالقلق من أن بعض المستخدمين قد لا يكون جافا سكريبت <. / P>
إذا كنت تستخدم أي نوع من إطارات العمل، فعادةً ما تكون هذه إحدى الميزات الأولى التي يتضمنها.
بخلاف ذلك، بحثت في Google عن "ألوان جدول jscript البديلة" وحصلت على عشرات الروابط للتقنيات.
(جانبا:إنه لأمر سيء للغاية أن المطورين لا يحصلون أبدًا على الفضل في الكود الذي يستخدمونه لم يفعل ذلك يكتب.)
وأنا دائما تطبيق الطبقة على جانب الملقم حيث يتم تدفق هم من أصل / تضاف إلى الصفحة، ولكن إذا كان لديك العميل إعادة فرز الصفوف سوف تحتاج إلى إعادة تصنيفها.
ولقد وجدت موقع جيد شرح ما تريد تحقيقه باستخدام مسج:
وهنا هو على المحصلة النهائية http://15daysofjquery.com/examples/zebra/code/demoFinal.php
وهنا هو tutorial- http://15daysofjquery.com/examples/zebra/
وأود أن أقول حقا أن ذلك يعتمد على الوضع. إذا كنت حلقات عبر البيانات لإنشاء الصفوف على جانب الملقم، وأود أن أقول ربما ما يجب عليك فعله هناك.
وهذا يحصل كثيرا أكثر تعقيدا إذا كنت تسير على البدء في استخدام البرنامج النصي العميل لفرز / إعادة ترتيب الصفوف. في هذه الحالة إذا كان 100 صف أو نحو ذلك قد تميل لي أن نفعل ذلك على جانب العميل الحدث ONLOAD، لأنه على الأقل بهذه الطريقة لا يتم تكرار كود لتحديد لون التوالي. أنا أعترف، انها حقا يتوقف على سرعة أنه في هذه الحالة. أنا ربما تحاول ذلك ومعرفة ما إذا كان الأداء مقبولا قبل اتخاذ قرار نهائي.
