יצירת טבלה בצורה דינאמית

WebMaster Team ‏ • 31 בינואר, 2004

במקרים מסויימים אנו רוצים ליצור טבלה בצורה דינאמית, בהתאם לתנאים כשלהם, במקום לכתוב את קוד ה-HTML של הטבלה בצורה סטטית בדף.
זאת אנחנו יכולים לעשות ע"י סקריפט צד-לקוח שייצור את הטבלה ויציג אותה בדף.
לדוגמא, בלחיצה על הכפתור הבא, תופיע בדף טבלה של 6X9:

השיטות העיקריות שישמשו אותנו:

getElementById - מקבלת מחרוזת שמקבלת ID של אלמנט מסויים בדף, ומחזירה לנו רפרנס לאותו אלמנט.
createElement - מקבלת שם של אלמנט (לדוגמא: TD), יוצרת אותו ומחזירה לנו רפרנס אליו (אך לא מציגה אותו בדף)
appendChild - מקבלת רפרנס לאלמנט, ומצרפת אותו לאלמנט ממנו נקראה השיטה (לדוגמא, אלמנט מסוג TD, תמיד יצורף לאלמנט מסוג TR)

אז נתחיל עם הקוד...

קודם כל, נגדיר את הפונקציה שלנו. היא תקבל כפרמטרים את מספר השורות שיהיו בטבלה, ואת מספר העמודות בכל שורה:

function fCreateTable(nRows, nCols)

שנית, ניצור ונאתחל את המשתנים שלנו:

1
2
3

var oDiv = document.getElementById("oDiv"),
oTable = document.createElement("TABLE"),
oTBody = document.createElement("TBODY"),oTD

oDiv - יכיל את ה-DIV שבתוכו תופיע הטבלה
oTable - הטבלה עצמה
oTBody - גוף הטבלה
oTD, oTR - השורות והעמודות

נריץ לולאה שתרוץ מספר פעמים כמספר השורות שאנחנו רוצים בטבלה,
ובכל איטרציה שלה ניצור שורה אחת:

1
2

for (var i=0;i<nRows;i++) {
oTR = document.createElement("TR");

בתוך הלולאה הזו, ניצור עוד לולאה עבור העמודות:

1
2
3
4
5

for (var j=0;j<nCols;j++) {
    oTD = document.createElement("TD");
    oTD.innerHTML = i+","+j;
    oTR.appendChild(oTD);
}

בתוכה ניצור את התאים, ניתן להם טקסט לתצוגה ונצמיד אותם לשורה שכרגע יצרנו.
לאחר מכן, נצמיד את השורה לגוף הטבלה:

oTBody.appendChild(oTR);

לאחר שיצרנו את כל השורות, נצמיד את הטבלה ל-DIV בו אנחנו רוצים להציג אותה

oDiv.appendChild(oTable);

הקריאה לפונקציה

ניתור את ה-DIV בו אנחנו רוצים להציג את הטבלה, וכפתור אשר בלחיצה עליו נרא לפונקציה:

1
2

הקוד במלואו

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    for (var i=0;i<nRows;i++) {
        oTR = document.createElement("TR");
        for (var j=0;j<nCols;j++) {
            oTD = document.createElement("TD");
            oTD.innerHTML = i+","+j;
            oTR.appendChild(oTD);
        }
        oTBody.appendChild(oTR);
    }
    oDiv.appendChild(oTable);
    oTable.border=1
}

</script>
<div id="oDiv"></div>
<input type="button" value="צור טבלה" onclick="fCreateTable(6,9)">

תכנות נעים!

תגיות: JS, table, דינאמי, טבלה

יצירת טבלה בצורה דינאמית

השיטות העיקריות שישמשו אותנו:

אז נתחיל עם הקוד...

הקריאה לפונקציה

הקוד במלואו

עוד בנושא זה

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

תגיות