چیزی که توی ذهنمه لیست کردن تمام childهای مستقیم عنصرمونه (که برای table میشه trها معمولا اگر از tbody و thead استفاده نشه)
بعد یکی در میون (در یک حلقه) attribute کلاس براشون ست بشه. (احتمالا سازگاری مناسبی با مرورگرها هم داره)
ولی از اونجایی که در موراد اینچنین (اصولا برنامه نویسی) طفلی بیش نیستم! اگر امکانش هست و فرصت داشتید در این مورد راهنمایی کنید.
/
ولی CSS3 دقیقا همین کار رو انجام میده ... سلکتورهای پیشرفته ای تعریف شده که توسطش میشه child مثلا xام یک عنصر parent رو انتخاب کرد. بعد جالبیش اینجاست که همین هم فرومل پذیره !
و مثلا میشه نوشت که فرزند 2n+1م هر تیبلی اینجوری باشه !
هر چند که زهی خیال باطل که تا قبل از حداقل 2010 بشه از CSS3 استفاده کرد .. همین الانش 2.1 رو IE درست ساپورت نمیکنه ! :d
البته درست کردن این نوع جداول در سمت سرور یعنی صفحات php-asp-aspx خیلی ساده است. روشی که من در مواردی نظیر این بکار میبرم اینه که یک کلاس برای عناصری که باید ویژگی خاصی روشون پیاده بشه تعریف میکنم و propertyها رو بصورت attribute مشخص میکنم:
HTML:
<table class="multi" color1="red" color2="green">
بعد در انتهای کد html یک اسکریپت میگذارم که تمام عناصری رو که کلاس مورد نظر رو دارن پیدا میکنه و خواسته ما رو با توجه به attributeهایی که تعریف کردیم روی اون عناصر پیاده میکنه.
HTML:
<script language="javascript">
var tables=document.getElementsByTagName("table") ;
for (i=0; i<tables.length; i++) {
if (tables[i].className=="multi") {
for (j=0; j<tables[i].tBodies.length; j++) {
for(k=0; k<tables[i].tBodies[j].rows.length; k++) {
tables[i].tBodies[j].rows[k].style.backgroundColor = (k % 2 == 0) ? tables[i].getAttribute("color1") : tables[i].getAttribute("color2") ;
}
}
}
}
</script>
نکته ای که باید بهش دقت کنین اینه که اگر جدول شما header یا footer داره حتما" از body هم براش استفاده کنین در غیر اینصورت ممکنه این تغییر رنگ رو بجای ردیفهای بدنه جدول روی header یا footer هم انجام بده!
