كيفية تبديل ألوان صف جدول HTML باستخدام JSP؟

Question

كيف يمكنني تبديل ألوان صفوف جدول HTML باستخدام JSP؟

يبدو CSS الخاص بي كما يلي:

tr.odd {background-color: #EEDDEE}
tr.even {background-color: #EEEEDD}

أريد أن استخدام <c:forEach> للتكرار على مجموعة.

<c:forEach items="${element}" var="myCollection">
  <tr>
    <td><c:out value="${element.field}"/></td>
    ...
  </tr>
</c:forEach>

أحتاج إلى متغير عدد int أو متغير منطقي فردي/زوجي لتتبع الصف.ثم بلدي <tr> ستبدو العلامة كما يلي:

<tr class="odd or even depending on the row">

Answer 1

استخدم السمة varStatus على العلامة forEach الخاص بك وسوف JSTL إدارة مثيل <لأ href = "http://java.sun.com/products/jsp/jstl/1.1/docs/api/javax/servlet/ التخطيط الاستراتيجي المشترك / JSTL / الأساسية / LoopTagStatus.html "يختلط =" noreferrer "> javax.servlet.jsp.jstl.core.LoopTagStatus لك في اسم المتغير الذي تحدده.

ويمكنك بعد ذلك استخدام مشغل الثلاثي لسهولة إخراج اسم الفئة المناسبة:

<c:forEach items="${element}" var="myCollection" varStatus="loopStatus">
  <tr class="${loopStatus.index % 2 == 0 ? 'even' : 'odd'}">
    ...
  </tr>
</c:forEach>

JSTL التمهيدي من IBM لديها مزيد من المعلومات حول core مكتبة العلامة وما يعطي لك.

Answer 2

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

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

http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy

http://docs.jquery.com/Selectors/odd

http://docs.jquery.com/Selectors/even

Answer 3

و(هذه الإجابة يخص فقط إلى الجانب CSS من الأشياء ...)

وبطبيعة الحال، وأنا تستهدف دائما TD الطفل مثل ذلك:

tr.odd td {}
tr.even td {}

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

وأيضا، قد ترغب في النظر في وضع فقط

tr td {background-color: #EEDDEE}

و

tr.odd td {background-color: #EEEEDD}

وهكذا كود الخاص بك هو أقل قليلا مطول

Answer 4

وفقط تفعل مثل هذا، والذهاب إلى العمل:

table tr:nth-child(odd) { background-color: #ccc; }

Answer 5

وأنا لا أستعمل JSP، لذلك لا أستطيع أن أعطيك جوابا في اللغة الخاصة بك، ولكن هنا ما أقوم به (باستخدام رمز زائف)

counter = 0
foreach (elements)
    counter = counter + 1
    output: <tr class="row{counter % 2}">...</tr>

وأنا شخصيا تسمية الطبقات "row0" و "ROW1"، الذي يتيح لك بالتناوب بين لهم حساب معامل بسيطة، وأيضا، إذا كنت قررت أن يكون صفوف بالتناوب في يتضاعف ثلاث مرات أو الكواد (بدلا من أزواج)، يمكنك بسهولة توسيع نطاقه ليشمل row2، row3 وتغيير كود الانتاج ليتم counter % 4، وما إلى ذلك.

Answer 6

لقد استخدمت عامل التشغيل الثالث في مثل هذه الحالات.سيبدو شيئًا مثل:

String oddEven="";
<c:forEach items="${element}" var="myCollection">
    oddEven = (oddEven == "even") ? "odd" : "even";
    <tr class='"'+oddEven+'"'>
        <td><c:out value="${element.field}"/></td>
        ...
    </tr>
</c:forEach>