מדריך DHTML – אובייקט Table
אחד האלמנטים השימושיים ביותר, דרך מצויינת ליצור תפריטים דינאמיים ובכלל לדעתי דרך מצויינת (קראו את ההערה) להצגת דפי אינטרנט מסודרים, רק חבל שאין תמיכה של דפדפנים אחרים באובייקט הזה…
יש אלף ואחת דוגמאות לשימושים מדהימים באלמנט הזה אבל אני דווקא אראה ואסביר כמה מהפשוטים (אני שומר את המסובכים למאמרים)
הערה חשובה(!):
האלמנט הזה לא קיים בנטסקייפ (עד גרסא 6.2 בכל מקרה.. לא יודע אם גרסאות יותר חדשות תומכות או לא) לכן שימוש באלמנט הזה בכל אתר יפגע בקהל הגולשים שמשתמש
בדפדפנים אחרים חוץ מאקספלורר, נכון שיגידו שהרוב בגולשים משתמשים באקספלורר, אבל אם לא תתנו הזדמנות לנטסקייפ איך יעלה אחוז המשתמשים בתוכנה? ובטח שבאתרים
מקצועיים אי אפשר לעשות כזה דבר שהרי זה פוגע בחברה שיש בסביבות 10 אחוז מהגולשים באתר שלה שלא יוכלו להנות מהתפריט או בכלל גלישה נוחה באתר, אני יודע שאותי
זה היה מרגיז..
בכל מקרה ניגש לעניין, שינוי שורות או טורים תעשה בצורה הבאה:
TableID.rows(cols)[indexNum].height(width)="num"
בוא נגיד שנרצה לקבוע את גובה השורה השלישית שיהיה 50, נעשה את זה ככה..
TableID.rows[2].height="50"
או את הרוחב של הטור הראשון ל-100
TableID.cols[0].width="100"
למשל נרצה לקבוע את החוקים(rules) של הטבלה, נרצה להראות רק את השורות, בלי הטורים
TableID.rules="rows"
המאפיין הזה יכול לקבל גם cols או none.
שיטות שימושיות יותר הן deleteRow() שהשימוש בה דיי פשוט:
TableID.deleteRow(rowNum)
או השיטה insertRow() שהשימוש בה קצת פחות פשוט אבל לא מסובך, קודם נקבע איזה שורה אנחנו רוצים להוסיף אחרי זה נקבע כמה תאים ומה יהיה כתוב בכל אחד, למשל לשורה אחת עם תא אחד נעשה:
TableID.insertRow(0).insertCell(0).innerText="I'm new!"
אבל ליותר מתא אחד זה יהיה בזבזני לרשום את כל השורה הזאת כל פעם מחדש לכן נעשה זאת כך:
var x=TableID.insertRow(1) x.insertCell(0).innerText="This is one" x.insertCell(1).innerText="This is two"
וכו'…
border | משנה או מחזיר את עובי גבול הטבלה |
caption | מחזיר את הכותרת של הטבלה |
cellPadding | משנה או מחזיר את הרווח בין התאים לבין הגבול של הטבלה |
cellSpacing | משנה או מחזיר את הרווח בין התאים |
frame | מציין איזה גבולות של התא לבצע/לעשות |
rows | השורות בטבלה |
rules | מציין איזה גבולות לבצע |
summary | משנה או מחזיר תאור של הטבלה |
tBodies | מחזיר את כל אלמנטי ה- TBODY בטבלה |
tFoot | מחזיר את כל אלמנטי ה- TFOOT בטבלה |
tHead | מחזיר את כל אלמנטי ה- THEAD בטבלה |
width | משנה או מחזיר את רוחב הטבלה |
()createCaption | יוצר כותרת לטבלה או מחזיר את הקיימת |
()createTFoot | יוצר FOOTER לטבלה או מחזיר את הקיים |
()createTHead | יוצר HEADER לטבלה או מחזיר את הקיים |
()deleteCaption | מוחק את הכותרת של הטבלה |
()deleteTFoot | מוחק את ה FOOTER |
()deleteTHead | מוחק את ה HEADER |
(deleteRow(index | מוחק את השורה ה- index(מספר) |
(insertRow(index | מוסיף שורה במקום ה- index |
ROWS
ולאובייקט המייצג של
align | משנה את המיקום האופקי של התוכן בתאים |
cells | מחזיר קולקציה של כל התאים בשורה |
ch | שיחקתי עם זה ולא מצאתי מה זה עושה.. |
chOff | אם מישהו יצליח לגלות אני ישמח לדעת |
rowIndex | מחזיר את המספר הסידורי של השורה ביחס לטבלה |
sectionRowIndex | מחזיר את המספר הסידורי של הטבלה ביחס ל THEAD, TFOOT או TBODY |
vAlign | משנה את המיקום האנכי של התוכן בתאים |
(deleteCell(index | מוחק תא |
(insertCell(index | מוסיף תא |
CELLS
וכמובן לא נשכח את הקולקציה של התאים, cells שנכתבת בצורה הבאה: TableID.rows[index].cells[index2] ונוספים לה המאפיינים הבאים בצרוף של נקודה בניהם כמובן
abbr | משנה או מחזיר את ראשי התיבות לתאי כותרת(abbreviation for header cells) |
align | קובע את המיקום האופקי בתוך התא |
axis | משנה או מחזיר שם של קבוצת HEADERS |
cellIndex | מחזיר את המספר הסידורי של התא בשורה |
ch | |
chOff | |
colSpan | משנה או מחזיר את פרישת התא על מספר טורים |
headers | Returns a list of the id attribute's value for header cells בתרגום חופשי: מחזיר רשימה של ערכי מאפייני ה- ID לתאי HEADERS |
rowSpan | משנה או מחזיר את פרישת התא על מספר שורות |
scope | |
vAlign | קובע את המיקום האופקי בתוך התא |
תגובות בפייסבוק