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

מדריך DHTML - אובייקט Table

RiU/‏ 8 נובמבר, 2003
F+
F-
אחד האלמנטים השימושיים ביותר, דרך מצויינת ליצור תפריטים דינאמיים ובכלל לדעתי דרך מצויינת (קראו את ההערה) להצגת דפי אינטרנט מסודרים, רק חבל שאין תמיכה של דפדפנים אחרים באובייקט הזה... יש אלף ואחת דוגמאות לשימושים מדהימים באלמנט הזה אבל אני דווקא אראה ואסביר כמה מהפשוטים (אני שומר את המסובכים למאמרים)

הערה חשובה(!): האלמנט הזה לא קיים בנטסקייפ (עד גרסא 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משנה או מחזיר את פרישת התא על מספר טורים
headersReturns a list of the id attribute's value for header cells
בתרגום חופשי: מחזיר רשימה של ערכי מאפייני ה- ID לתאי HEADERS
rowSpanמשנה או מחזיר את פרישת התא על מספר שורות
scope
vAlign קובע את המיקום האופקי בתוך התא

RiU

מאמרים נוספים של RiU

עוד בנושא זה

תגיות: JS‏  /  Javascript‏  /  DHTML‏  /  DOM‏  /  Dynamic‏  /  דינמי‏  /  Table‏  /  טבלה‏  

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

תגובות למאמר



חזרה למאמרים הדפסה לראש העמוד

עוד במדריך

תגיות אקראיות

Folder רדיו INTO תיבת סימון cast Linux יוצר window linked תמונה Windows Live Writer XML פונטים HTML סל קניות צד שרת XHTML DataSet ISOC קידום

תגיות פופולאריות

html cshtml css js asp.net asp php jsp asp.net וורדפרס xml sql seo fso
X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות