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