מדריך 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

ולאובייקט המייצג של

או Table Rows שנכתב ככה: TableID.rows[index] גם הוא קולקציה, וגם לו יש מאפיינים ושיטות:

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 קובע את המיקום האופקי בתוך התא

תגיות: , , , , , , ,

תגובות בפייסבוק