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

‏ • 31 בינואר, 2004

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

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

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

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

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



1  

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);
}


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



1  

oTBody.appendChild(oTR);


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



1  

oDiv.appendChild(oTable);


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

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



1
2  

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


הקוד במלואו




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

<script language="JavaScript">
function fCreateTable(nRows, nCols) {
    var oDiv = document.getElementById("oDiv"),
        oTable = document.createElement("TABLE"),
        oTBody = document.createElement("TBODY"),oTD, oTR
    oTable.appendChild(oTBody);

    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)">


תכנות נעים!

תגיות: , , ,

entry

סטודיו לבניית אתרים שהוקם בינואר 2005

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