ساخت جداول HTML با جاوا اسکریپت — از صفر تا صد

۱۰۳۵ بازدید

آخرین به‌روزرسانی: ۰۷ شهریور ۱۴۰۲

زمان مطالعه: ۱۲ دقیقه

ساخت جداول HTML با جاوا اسکریپت — از صفر تا صد

در این مقاله با سه روش برای ساخت جداول HTML با جاوا اسکریپت آشنا خواهیم شد و مزایا و معایب هر کدام از این روش‌ها را بررسی می‌کنیم. جدولی که در تصویر زیر می‌بینید همه عناصر 118-گانه شیمیایی را به همراه نام اتم، عدد اتمی و نماد شیمیایی‌شان نمایش می‌دهد. توجه کنید که در فرمول‌ها از اختصاراتی مانند H2O یا NaCl استفاده شده است.

فهرست مطالب این نوشته

ساخت جداول HTML با جاوا اسکریپت

این جدول به همراه کپشن، عناوین ستون‌ها و ردیف‌ها توسط جاوا اسکریپت به صورت دینامیک از یک ساختمان داده ساخته شده است که در این مورد یک آرایه از اشیا است. جداول عناصر شیمیایی در قیاس با جداول دیگر HTML نسبتاً پیچیده هستند و ممکن است برای ساخت آن‌ها به زحمت بیفتید. از این رو صرف وقت و یادگیری روشی کارآمد برای اجرا و آسان برای کدنویسی قطعاً ارزشمند خواهد بود.

چنان که پیش‌تر اشاره کردیم، در این راهنما سه روش برای ساخت جداول HTML با جاوا اسکریپت معرفی خواهیم کرد:

ساخت جداول به صورت یک رشته منفرد HTML که در ادامه به صورت یک عملیات منفرد به سند اضافه می‌شود.
استفاده از متدهای استاندارد دستکاری DOM به نام createElement ،‌createTextNode و appendChild.
استفاده از متدهای خاص جدول به نام createCaption‌ ،insertRow و insertCell.

در ادامه این راهنما هر کدام از این روش‌ها را به صورت جداگانه و تفصیلی توضیح خواهیم داد.

پروژه نمونه

پروژه نمونه‌ای که در این راهنما برای نمایش روش‌های مختلف ساخت جداول HTML با جاوا اسکریپت بررسی می‌کنیم شامل فایل‌های زیر به همراه یک فایل CSS و یک گرافیک است. این فایل‌ها در مجموع یک وب‌اپلیکیشن کامل را تشکیل می‌دهند. همچنین می‌توانید از این ریپازیتوری گیت‌هاب (+) آن را روی سیستم خود کلون یا دانلود کنید.

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

فایل creatingtables.htm

1<!DOCTYPE html>
2
3<html lang="en">
4
5<head>
6	<title>CodeDrome - Creating HTML Tables with JavaScript</title>
7    <meta charset="utf-8" />
8    <link href="projects.css" rel="stylesheet" />
9</head>
10
11<body>
12
13	<div class="maindiv">
14
15		<div class="banner"></div>
16
17		<div class="contentdiv roundcorners" id="tablediv">
18
19		</div>
20
21	</div>
22
23    <script src="elements.js"></script>
24    <script src="creatinghtmltables.js"></script>
25
26</body>
27
28</html>

فایل creatingtables.js

1window.onload = function()
2{
3    createTable1();
4
5    // createTable2();
6
7    // createTable3();
8}
9
10
11function createTable1()
12{
13    const elements = Elements.GetElements();
14    const headings = Elements.GetHeadings();
15    const properties = Elements.GetProperties();
16
17    // start table and add caption
18    let tablehtml = "<table><caption>Elements</caption>";
19
20    // insert row of headings
21    tablehtml  += "<tr>";
22    for(let heading of headings)
23    {
24        tablehtml  += `<th>${heading}</th>`;
25    }
26    tablehtml += "</tr>";
27
28    // iterate data and add row of cells for each
29    for(let element of elements)
30    {
31        tablehtml  += "<tr>";
32
33        for(let property of properties)
34        {
35            tablehtml  += `<td>${element[property]}</td>`;
36        }
37
38        tablehtml  += "</tr>";
39    }
40
41    // end of table
42    tablehtml += "</table>";
43
44    // add table to the empty div
45    document.getElementById("tablediv").innerHTML = tablehtml;
46}
47
48function createTable2()
49{
50    const elements = Elements.GetElements();
51    const headings = Elements.GetHeadings();
52    const properties = Elements.GetProperties();
53
54    // create table
55    const table = document.createElement("table");
56
57    // create caption and add to table
58    const caption = document.createElement("caption");
59    const captiontext = document.createTextNode("Elements");
60    caption.appendChild(captiontext);
61    table.appendChild(caption);
62
63    // create row for headings...
64    const hrow = document.createElement("tr");
65    table.appendChild(hrow);
66
67    // ...and add cells to it
68    for(let heading of headings)
69    {
70        const th = document.createElement("th");
71        const thtext = document.createTextNode(heading);
72        th.appendChild(thtext);
73        hrow.appendChild(th);
74    }
75
76    // iterate data, adding rows and cells for each item
77    for(let element of elements)
78    {
79        const drow = document.createElement("tr");
80        table.appendChild(drow);
81
82        for(let property of properties)
83        {
84            const td = document.createElement("td");
85            const tdtext = document.createTextNode(element[property]);
86            td.appendChild(tdtext);
87            drow.appendChild(td);
88        }
89    }
90
91    // add table to div
92    document.getElementById("tablediv").appendChild(table);
93}
94
95function createTable3()
96{
97    const elements = Elements.GetElements();
98    const headings = Elements.GetHeadings();
99    const properties = Elements.GetProperties();
100
101    // create a table
102    const table = document.createElement("table");
103
104    // add a caption
105    table.createCaption().textContent = "Elements";
106
107    // insert a row and add headings to it
108    const hrow = table.insertRow();
109    for(let heading of headings)
110    {
111        hrow.insertCell(-1).outerHTML = `<th>${heading}</th>`;
112    }
113
114    // iterate data, adding rows and cells for each element
115    for(let element of elements)
116    {
117        const drow = table.insertRow(-1);
118
119        for(let property of properties)
120        {
121            drow.insertCell(-1).innerHTML = element[property];
122            // OR
123            // drow.insertCell(-1).appendChild(document.createTextNode(element[property]));
124        }
125    }
126
127    // add table to div
128    document.getElementById("tablediv").appendChild(table);
129}

فایل elements.js

1class Elements
2{
3    static GetHeadings()
4    {
5        return ["Name", "Atomic Number", "Chemical Symbol"];
6    }
7
8    static GetProperties()
9    {
10        return ["name", "atomicnumber", "symbol"];
11    }
12
13    static GetElements()
14    {
15        return [
16        {
17            name: "Hydrogen",
18            atomicnumber: 1,
19            symbol: "H"
20        },
21        {
22            name: "Helium",
23            atomicnumber: 2,
24            symbol: "He"
25        },
26        {
27            name: "Lithium",
28            atomicnumber: 3,
29            symbol: "Li"
30        },
31        {
32            name: "Beryllium",
33            atomicnumber: 4,
34            symbol: "Be"
35        },
36        {
37            name: "Boron",
38            atomicnumber: 5,
39            symbol: "B"
40        },
41        {
42            name: "Carbon",
43            atomicnumber: 6,
44            symbol: "C"
45        },
46        {
47            name: "Nitrogen",
48            atomicnumber: 7,
49            symbol: "N"
50        },
51        {
52            name: "Oxygen",
53            atomicnumber: 8,
54            symbol: "O"
55        },
56        {
57            name: "Fluorine",
58            atomicnumber: 9,
59            symbol: "F"
60        },
61        {
62            name: "Neon",
63            atomicnumber: 10,
64            symbol: "Ne"
65        },
66        {
67            name: "Sodium",
68            atomicnumber: 11,
69            symbol: "Na"
70        },
71        {
72            name: "Magnesium",
73            atomicnumber: 12,
74            symbol: "Mg"
75        },
76        {
77            name: "Aluminium",
78            atomicnumber: 13,
79            symbol: "Al"
80        },
81        {
82            name: "Silicon",
83            atomicnumber: 14,
84            symbol: "Si"
85        },
86        {
87            name: "Phosphorus",
88            atomicnumber: 15,
89            symbol: "P"
90        },
91        {
92            name: "Sulfur",
93            atomicnumber: 16,
94            symbol: "S"
95        },
96        {
97            name: "Chlorine",
98            atomicnumber: 17,
99            symbol: "Cl"
100        },
101        {
102            name: "Argon",
103            atomicnumber: 18,
104            symbol: "Ar"
105        },
106        {
107            name: "Potassium",
108            atomicnumber: 19,
109            symbol: "K"
110        },
111        {
112            name: "Calcium",
113            atomicnumber: 20,
114            symbol: "Ca"
115        },
116        {
117            name: "Scandium",
118            atomicnumber: 21,
119            symbol: "Sc"
120        },
121        {
122            name: "Titanium",
123            atomicnumber: 22,
124            symbol: "Ti"
125        },
126        {
127            name: "Vanadium",
128            atomicnumber: 23,
129            symbol: "V"
130        },
131        {
132            name: "Chromium",
133            atomicnumber: 24,
134            symbol: "Cr"
135        },
136        {
137            name: "Manganese",
138            atomicnumber: 25,
139            symbol: "Mn"
140        },
141        {
142            name: "Iron",
143            atomicnumber: 26,
144            symbol: "Fe"
145        },
146        {
147            name: "Cobalt",
148            atomicnumber: 27,
149            symbol: "Co"
150        },
151        {
152            name: "Nickel",
153            atomicnumber: 28,
154            symbol: "Ni"
155        },
156        {
157            name: "Copper",
158            atomicnumber: 29,
159            symbol: "Cu"
160        },
161        {
162            name: "Zinc",
163            atomicnumber: 30,
164            symbol: "Zn"
165        },
166        {
167            name: "Gallium",
168            atomicnumber: 31,
169            symbol: "Ga"
170        },
171        {
172            name: "Germanium",
173            atomicnumber: 32,
174            symbol: "Ge"
175        },
176        {
177            name: "Arsenic",
178            atomicnumber: 33,
179            symbol: "As"
180        },
181        {
182            name: "Selenium",
183            atomicnumber: 34,
184            symbol: "Se"
185        },
186        {
187            name: "Bromine",
188            atomicnumber: 35,
189            symbol: "Br"
190        },
191        {
192            name: "Krypton",
193            atomicnumber: 36,
194            symbol: "Kr"
195        },
196        {
197            name: "Rubidium",
198            atomicnumber: 37,
199            symbol: "Rb"
200        },
201        {
202            name: "Strontium",
203            atomicnumber: 38,
204            symbol: "Sr"
205        },
206        {
207            name: "Yttrium",
208            atomicnumber: 39,
209            symbol: "Y"
210        },
211        {
212            name: "Zirconium",
213            atomicnumber: 40,
214            symbol: "Zr"
215        },
216        {
217            name: "Niobium",
218            atomicnumber: 41,
219            symbol: "Nb"
220        },
221        {
222            name: "Molybdenum",
223            atomicnumber: 42,
224            symbol: "Mo"
225        },
226        {
227            name: "Technetium",
228            atomicnumber: 43,
229            symbol: "Tc"
230        },
231        {
232            name: "Ruthenium",
233            atomicnumber: 44,
234            symbol: "Ru"
235        },
236        {
237            name: "Rhodium",
238            atomicnumber: 45,
239            symbol: "Rh"
240        },
241        {
242            name: "Palladium",
243            atomicnumber: 46,
244            symbol: "Pd"
245        },
246        {
247            name: "Silver",
248            atomicnumber: 47,
249            symbol: "Ag"
250        },
251        {
252            name: "Cadmium",
253            atomicnumber: 48,
254            symbol: "Cd"
255        },
256        {
257            name: "Indium",
258            atomicnumber: 49,
259            symbol: "In"
260        },
261        {
262            name: "Tin",
263            atomicnumber: 50,
264            symbol: "Sn"
265        },
266        {
267            name: "Antimony",
268            atomicnumber: 51,
269            symbol: "Sb"
270        },
271        {
272            name: "Tellurium",
273            atomicnumber: 52,
274            symbol: "Te"
275        },
276        {
277            name: "Iodine",
278            atomicnumber: 53,
279            symbol: "I"
280        },
281        {
282            name: "Xenon",
283            atomicnumber: 54,
284            symbol: "Xe"
285        },
286        {
287            name: "Caesium",
288            atomicnumber: 55,
289            symbol: "Cs"
290        },
291        {
292            name: "Barium",
293            atomicnumber: 56,
294            symbol: "Ba"
295        },
296        {
297            name: "Lanthanum",
298            atomicnumber: 57,
299            symbol: "La"
300        },
301        {
302            name: "Cerium",
303            atomicnumber: 58,
304            symbol: "Ce"
305        },
306        {
307            name: "Praseodymium",
308            atomicnumber: 59,
309            symbol: "Pr"
310        },
311        {
312            name: "Neodymium",
313            atomicnumber: 60,
314            symbol: "Nd"
315        },
316        {
317            name: "Promethium",
318            atomicnumber: 61,
319            symbol: "Pm"
320        },
321        {
322            name: "Samarium",
323            atomicnumber: 62,
324            symbol: "Sm"
325        },
326        {
327            name: "Europium",
328            atomicnumber: 63,
329            symbol: "Eu"
330        },
331        {
332            name: "Gadolinium",
333            atomicnumber: 64,
334            symbol: "Gd"
335        },
336        {
337            name: "Terbium",
338            atomicnumber: 65,
339            symbol: "Tb"
340        },
341        {
342            name: "Dysprosium",
343            atomicnumber: 66,
344            symbol: "Dy"
345        },
346        {
347            name: "Holmium",
348            atomicnumber: 67,
349            symbol: "Ho"
350        },
351        {
352            name: "Erbium",
353            atomicnumber: 68,
354            symbol: "Er"
355        },
356        {
357            name: "Thulium",
358            atomicnumber: 69,
359            symbol: "Tm"
360        },
361        {
362            name: "Ytterbium",
363            atomicnumber: 70,
364            symbol: "Yb"
365        },
366        {
367            name: "Lutenium",
368            atomicnumber: 71,
369            symbol: "Lu"
370        },
371        {
372            name: "Hafnium",
373            atomicnumber: 72,
374            symbol: "Hf"
375        },
376        {
377            name: "Tantalum",
378            atomicnumber: 73,
379            symbol: "Ta"
380        },
381        {
382            name: "Tungsten",
383            atomicnumber: 74,
384            symbol: "W"
385        },
386        {
387            name: "Rhenium",
388            atomicnumber: 75,
389            symbol: "Re"
390        },
391        {
392            name: "Osmium",
393            atomicnumber: 76,
394            symbol: "Os"
395        },
396        {
397            name: "Iridium",
398            atomicnumber: 77,
399            symbol: "Ir"
400        },
401        {
402            name: "Platinum",
403            atomicnumber: 78,
404            symbol: "Pt"
405        },
406        {
407            name: "Gold",
408            atomicnumber: 79,
409            symbol: "Au"
410        },
411        {
412            name: "Mercury",
413            atomicnumber: 80,
414            symbol: "Hg"
415        },
416        {
417            name: "Thallium",
418            atomicnumber: 81,
419            symbol: "Tl"
420        },
421        {
422            name: "Lead",
423            atomicnumber: 82,
424            symbol: "Pb"
425        },
426        {
427            name: "Bismuth",
428            atomicnumber: 83,
429            symbol: "Bi"
430        },
431        {
432            name: "Polonium",
433            atomicnumber: 84,
434            symbol: "Po"
435        },
436        {
437            name: "Astatine",
438            atomicnumber: 85,
439            symbol: "At"
440        },
441        {
442            name: "Radon",
443            atomicnumber: 86,
444            symbol: "Rn"
445        },
446        {
447            name: "Francium",
448            atomicnumber: 87,
449            symbol: "Fr"
450        },
451        {
452            name: "Radium",
453            atomicnumber: 88,
454            symbol: "Ra"
455        },
456        {
457            name: "Actinium",
458            atomicnumber: 89,
459            symbol: "Ac"
460        },
461        {
462            name: "Thorium",
463            atomicnumber: 90,
464            symbol: "Th"
465        },
466        {
467            name: "Protactinium",
468            atomicnumber: 91,
469            symbol: "Pa"
470        },
471        {
472            name: "Uranium",
473            atomicnumber: 92,
474            symbol: "U"
475        },
476        {
477            name: "Neptunium",
478            atomicnumber: 93,
479            symbol: "Np"
480        },
481        {
482            name: "Plutonium",
483            atomicnumber: 94,
484            symbol: "Pu"
485        },
486        {
487            name: "Americium",
488            atomicnumber: 95,
489            symbol: "Am"
490        },
491        {
492            name: "Curium",
493            atomicnumber: 96,
494            symbol: "Cm"
495        },
496        {
497            name: "Berkelium",
498            atomicnumber: 97,
499            symbol: "Bk"
500        },
501        {
502            name: "Californium",
503            atomicnumber: 98,
504            symbol: "Cf"
505        },
506        {
507            name: "Einsteinium",
508            atomicnumber: 99,
509            symbol: "Es"
510        },
511        {
512            name: "Fermium",
513            atomicnumber: 100,
514            symbol: "Fm"
515        },
516        {
517            name: "Mendelevium",
518            atomicnumber: 101,
519            symbol: "Md"
520        },
521        {
522            name: "Nobelium",
523            atomicnumber: 102,
524            symbol: "No"
525        },
526        {
527            name: "Lawrencium",
528            atomicnumber: 103,
529            symbol: "Lr"
530        },
531        {
532            name: "Rutherfordium",
533            atomicnumber: 104,
534            symbol: "Rf"
535        },
536        {
537            name: "Dubnium",
538            atomicnumber: 105,
539            symbol: "Db"
540        },
541        {
542            name: "Seaborgium",
543            atomicnumber: 106,
544            symbol: "Sg"
545        },
546        {
547            name: "Bohrium",
548            atomicnumber: 107,
549            symbol: "Bh"
550        },
551        {
552            name: "Hassium",
553            atomicnumber: 108,
554            symbol: "Hs"
555        },
556        {
557            name: "Meitnerium",
558            atomicnumber: 109,
559            symbol: "Mt"
560        },
561        {
562            name: "Darmstadtium",
563            atomicnumber: 110,
564            symbol: "Ds"
565        },
566        {
567            name: "Roentgenium",
568            atomicnumber: 111,
569            symbol: "Rg"
570        },
571        {
572            name: "Copernicum",
573            atomicnumber: 112,
574            symbol: "Cn"
575        },
576        {
577            name: "Nihonium",
578            atomicnumber: 113,
579            symbol: "Nh"
580        },
581        {
582            name: "Flerovium",
583            atomicnumber: 114,
584            symbol: "Fl"
585        },
586        {
587            name: "Moscovium",
588            atomicnumber: 115,
589            symbol: "Mc"
590        },
591        {
592            name: "Livermorium",
593            atomicnumber: 116,
594            symbol: "Lv"
595        },
596        {
597            name: "Tennessine",
598            atomicnumber: 117,
599            symbol: "Ts"
600        },
601        {
602            name: "Oganesson",
603            atomicnumber: 118,
604            symbol: "Og"
605        }
606    ]
607    }
608}

فایل prohects.css

1.maindiv
2{
3    background-color: #282C34;
4    position: absolute;
5    left: 0px;
6    right: 0px;
7    top: 0px;
8    bottom: 0px;
9}
10
11.banner
12{
13    position: absolute;
14    left:8px;
15    top: 8px;
16    width: 681px;
17    height: 42px;
18    background-image: url("banner.png");
19}
20
21.linkpanel
22{
23    cursor: pointer;
24    cursor: hand;
25    color:#ffffff;
26    position: absolute;
27    right: 16px;
28    top: 8px;
29    height: 42px;
30    line-height: 42px;
31}
32
33.contentdiv
34{
35    position: absolute;
36    color: #000000;
37    left: 16px;
38    right: 16px;
39    top: 58px;
40    bottom: 16px;
41    font-family: Courier, monospace;
42    font-weight: bold;
43    background-color: #FFFFFF;
44    overflow: auto;
45    padding: 8px;
46}
47
48A:link {text-decoration: none; color:#FFFFFF; outline : none; border : 0;}
49A:visited {text-decoration: none; color:#FFFFFF; outline : none; border : 0;}
50A:active {text-decoration: none; color:#FFFFFF; outline : none; border : 0;}
51A:hover {text-decoration: underline; color:#FFFFFF; outline : none; border : 0;}
52
53
54.roundcorners
55{
56	background: #FFFFFF;
57	border:2px solid #404040;
58    border-radius: 4px 4px 4px 4px;
59}
60
61table
62{
63    border-collapse: collapse;
64}
65
66td
67{
68    border: 1px solid #000000;
69    padding: 4px;
70    font-family: sans-serif;
71    font-size: small;
72    color: #202020;
73}
74
75th
76{
77    border: 1px solid #000000;
78    padding: 4px;
79    font-family: sans-serif;
80    font-size: small;
81    color: #FFFFFF;
82    font-weight: bold;
83    background-color: #282C34;
84}
85
86caption
87{
88    border-style: solid;
89    border-color: #000000;
90    border-width: 1px 1px 0px 1px;
91    padding: 4px;
92    font-family: sans-serif;
93    font-size: medium;
94    font-weight: bold;
95    color: #FFFFFF;
96    background-color: #282C34;
97}

منبع داده‌ها

پیش از آن که دست به کار ساخت جداول بزنیم، باید به صورت اجمالی توضیحاتی در مورد منبع داده‌ها ارائه کنیم. در دنیای واقعی ممکن است در موارد مختلفی لازم باشد مقادیر یک جدول را پر کنید، مثلاً ممکن است یک ساختمان داده تجزیه شده از JSON به دست آمده از یک REST API را به این منظور مورد استفاده قرار دهید. در این دمو ما داده‌ها را درون یک متد استاتیک کلاس در فایل elements.js که بخشی از ریپازیتوری گیت‌هاب است، به صورت هاردکد قرار داده‌ایم. این کلاس متدهایی برای دریافت عناوین ستون‌ها و نام‌های مشخصه شیء نیز دارد.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

برای این که با شکل ظاهری آن آشنا شوید، در کد زیر بخش آغازین داده‌های عنصر ارائه شده است:

1class Elements
2{
3    static GetHeadings()
4    {
5        return ["Name", "Atomic Number", "Chemical Symbol"];
6    }
7
8    static GetProperties()
9    {
10        return ["name", "atomicnumber", "symbol"];
11    }
12
13    static GetElements()
14    {
15        return [
16        {
17            name: "Hydrogen",
18            atomicnumber: 1,
19            symbol: "H"
20        },
21        {
22            name: "Helium",
23            atomicnumber: 2,
24            symbol: "He"
25        },
26.
27.
28.
29.

اکنون شروع به بررسی کد در فایل creatingtables.js می‌کنیم:

1window.onload = function()
2{
3    createTable1();
4
5    // createTable2();
6
7    // createTable3();
8}

در کد فوق یکی از سه تابع برای ایجاد و مقداردهی جدول را فرامی‌خوانیم. البته شما می‌توانید فراخوانی‌های تابع را به دلخواه خود کامنت کرده یا از کامنت خارج کنید تا آن که مورد نظرتان است اجرا شود.

رویکرد اول

در ادامه نخستین تابع را برای ایجاد جداول HTML با جاوا اسکریپت می‌بینید:

1function createTable1()
2{
3    const elements = Elements.GetElements();
4    const headings = Elements.GetHeadings();
5    const properties = Elements.GetProperties();
6
7    // start table and add caption
8    let tablehtml = "<table><caption>Elements</caption>";
9
10    // insert row of headings
11    tablehtml  += "<tr>";
12    for(let heading of headings)
13    {
14        tablehtml  += `<th>${heading}</th>`;
15    }
16    tablehtml += "</tr>";
17
18    // iterate data and add row of cells for each
19    for(let element of elements)
20    {
21        tablehtml  += "<tr>";
22
23        for(let property of properties)
24        {
25            tablehtml  += `<td>${element[property]}</td>`;
26        }
27
28        tablehtml  += "</tr>";
29    }
30
31    // end of table
32    tablehtml += "</table>";
33
34    // add table to the empty div
35    document.getElementById("tablediv").innerHTML = tablehtml;
36}

ساختار کلی سه تابع شکل یکسانی دارد:

دریافت داده‌ها
ایجاد جدول
افزودن کپشن
افزودن عناوین ستون‌ها
درج داده‌ها
درج جدول در یک div خالی در فایل creatinghtmltables.htm

در گام نخست یک متغیر به نام tablehtml برای نگهداری جدول به صورت یک رشته ایجاد کرده و آن را با تگ آغازین جدول و کپشن مقداردهی می‌کنیم.

سپس یک ردیف جدید اضافه کرده و روی عناوین حلقه‌ تکرار تعریف می‌کنیم،. در ادامه پیش از بستن ردیف پایانی یک سلول برای هر کدام اضافه می‌کنیم.

پس از آن که روی آرایه عناصر حلقه تکرار را اجرا کردیم، یک ردیف برای هر کدام اضافه کرده و سپس یک حلقه تکرار روی مشخصه‌های هر شیء عنصر اجرا می‌کنیم و خانه‌های جدول را در طی مسیر اضافه می‌کنیم.

در نهایت باید جدول را ببندیم و آن را به صورت innerHTML در div خالی اضافه کنیم.

مزایای رویکرد اول

مزیت این رویکرد آن است که تنها یک بار و در پایان کار زمانی که innerHTML را تنظیم می‌کنیم، DOM را دستکاری خواهیم کرد. البته همه عناصر همچنان باید به DOM اضافه شوند، اما این کار در سطح پایین از سوی موتور جاوا اسکریپت و تنها فراخوانی‌های تابع جاوا اسکریپت از سوی ما انجام می‌گیرد. در تابع دوم که در ادامه معرفی خواهیم کرد، حتی برای یک مجموعه داده با اندازه معمول هم چند صد بار باید متدهای DOM را فراخوانی کنیم.

معایب رویکرد اول

عیب این رویکرد آن است که HTML را درون جاوا اسکریپت به صورت هاردکدشده آورده‌ایم. اجتناب کامل از این کار، دشوار است، اما بهره‌گیری از HTML گسترده در جاوا اسکریپت موجب می‌شود که نوشتن و نگهداری کد دشوار شود و اصل «جداسازی دغدغه‌ها» (separation of concerns) نقض گردد.

رویکرد دوم

در این بخش رویکرد دوم برای ساخت جداول HTML با جاوا اسکریپت را از طریق متدهای DOM بررسی می‌کنیم.

1function createTable2()
2{
3    const elements = Elements.GetElements();
4    const headings = Elements.GetHeadings();
5    const properties = Elements.GetProperties();
6
7    // create table
8    const table = document.createElement("table");
9
10    // create caption and add to table
11    const caption = document.createElement("caption");
12    const captiontext = document.createTextNode("Elements");
13    caption.appendChild(captiontext);
14    table.appendChild(caption);
15
16    // create row for headings...
17    const hrow = document.createElement("tr");
18    table.appendChild(hrow);
19
20    // ...and add cells to it
21    for(let heading of headings)
22    {
23        const th = document.createElement("th");
24        const thtext = document.createTextNode(heading);
25        th.appendChild(thtext);
26        hrow.appendChild(th);
27    }
28
29    // iterate data, adding rows and cells for each item
30    for(let element of elements)
31    {
32        const drow = document.createElement("tr");
33        table.appendChild(drow);
34
35        for(let property of properties)
36        {
37            const td = document.createElement("td");
38            const tdtext = document.createTextNode(element[property]);
39            td.appendChild(tdtext);
40            drow.appendChild(td);
41        }
42    }
43
44    // add table to div
45    document.getElementById("tablediv").appendChild(table);
46}

ساختار کلی تا حدود زیادی مشابه رویکرد قبلی است، اما این تابع از createElement و createTextNode برای جدول، کپشن، ردیف‌ها و خانه‌ها استفاده می‌کند که در ادامه با appendChild به والدین متناظرشان اضافه می‌شوند.

مزایای رویکرد دوم

مزیت این رویکرد آن است که از متدهای رسمی عرضه شده برای دستکاری DOM استفاده می‌کنیم که پایداری بیشتری دارد. اگر برای مثال document.createElement(“tr”) را فراخوانی کنیم، می‌دانیم که یک <tr> بدون نگرانی در مورد غلط‌های املایی و یا به خاطر سپردن </tr> در انتها به دست خواهد آمد.

معایب رویکرد دوم

عیب نخست رویکرد دوم این است که چنان که پیش‌تر اشاره کردیم، تعداد زیادی فراخوانی به متدهای مختلف DOM انجام می‌یابد. برای نمونه در یک جدول نسبتاً کوچک بیش از 500 فراخوانی وجود دارد. عیب دوم آن است که این کد طولانی‌تر از تابعی است که در رویکرد بعدی مشاهده خواهیم کرد.

رویکرد سوم

در نهایت آخرین روشی که برای ساخت جداول HTML با جاوا اسکریپت بررسی می‌کنیم به صورت زیر است:

1function createTable3()
2{
3    const elements = Elements.GetElements();
4    const headings = Elements.GetHeadings();
5    const properties = Elements.GetProperties();
6
7    // create a table
8    const table = document.createElement("table");
9
10    // add a caption
11    table.createCaption().textContent = "Elements";
12
13    // insert a row and add headings to it
14    const hrow = table.insertRow();
15    for(let heading of headings)
16    {
17        hrow.insertCell(-1).outerHTML = `<th>${heading}</th>`;
18    }
19
20    // iterate data, adding rows and cells for each element
21    for(let element of elements)
22    {
23        const drow = table.insertRow(-1);
24
25        for(let property of properties)
26        {
27            drow.insertCell(-1).innerHTML = element[property];
28            // OR
29            // drow.insertCell(-1).appendChild(document.createTextNode(element[property]));
30        }
31    }
32
33    // add table to div
34    document.getElementById("tablediv").appendChild(table);
35}

ساختار کلی در این رویکرد نیز مشابه دو رویکرد قبلی است، اما چنان که می‌بینید کد فشردگی بسیار بیشتری دارد. در این کد نیز همچنان باید از document.createElement(“table”) برای ایجاد جدول استفاده کنیم، اما پس از آن می‌توانیم از متدها و مشخصه‌های جدول یا عناصر فرزند آن برای ایجاد کپشن، ردیف‌ها و خانه‌ها بهره بگیریم.

توجه کنید که insertRow و insertCell یک آرگومان اندیس دریافت می‌کنند، اما می‌توان چنان که ما انجام داده‌ایم، از 1- برای درج یک ردیف یا سلول در انتها نیز استفاده کرد.

یک مشکل کوچک این است که نمی‌توان به صورت مستقیم یک <th> ایجاد کرد، زیرا insertCell همواره یک <td> به دست می‌دهد. البته با بازنویسی outerHTML خانه جدید می‌توان این مشکل را حل کرد.

زمانی که سلول‌ها را درج می‌کنید، دو روش برای تعیین متن، تعیین innerHTML و یا ایجاد/الحاق یک گره متن وجود دارد. هیچ کدام از این روش‌ها بر دیگری ارجحیتی ندارد، اما روش اول فشرده‌تر و دومی با روح تابع سازگارتر است. شما می‌توانید از هر کدام که صلاح می‌دانید بهره بگیرید.

همان مزایا/معایب رویکردهای قبلی نیز در این مورد وجود دارند به طوری که نوشتن کد و نگهداری آن نسبت به فراخوانی‌های وسیع دستکاری DOM آسان‌تر است.

سخن پایانی

در این مقاله سه روش برای ساخت جداول HTML با جاوا اسکریپت معرفی کردیم. شاید اینک بپرسید که بالاخره کدام روش را باید مورد استفاده قرار دهیم؟ هیچ پاسخ قطعی برای این پرسش وجود ندارد، با این حال رویکرد دوم مزیت خاصی ندارد و متدهای دیگر تخصصی‌تر هستند.

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر شما یک مجموعه داده ساده اما حجیم دارید و ساخت رشته کاری بهینه محسوب می‌شود، در صورتی که برایتان مهم نیست همه تگ‌های آغازین و پایانی و محتوای آن‌ها را به صورت دستی کدنویسی کنید، از رویکرد اول استفاده کنید. اما اگر حجم کمی از داده‌ها دارید و ترجیح می‌دهید کد فشرده و تمیزی بنویسید در این صورت از رویکرد سوم و متدهای createCaption ،‌insertRow و insertCell بهره بگیرید.

بر اساس رای ۲ نفر

آیا این مطلب برای شما مفید بود؟

اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.

ثبت نظر

منابع:

javascript-in-plain-english

میثم لطفی (+)

«میثم لطفی» در رشته‌های ریاضیات کاربردی و مهندسی کامپیوتر به تحصیل پرداخته و شیفته فناوری است. وی در حال حاضر علاوه بر پیگیری علاقه‌مندی‌هایش در رشته‌های برنامه‌نویسی، کپی‌رایتینگ و محتوای چندرسانه‌ای، در زمینه نگارش مقالاتی با محوریت نرم‌افزار با مجله فرادرس همکاری دارد.