فرادرسساخت جداول HTML با جاوا اسکریپت — از صفر تا صد
۱۳۸۴ بازدید
آخرین به‌روزرسانی: ۷ شهریور ۱۴۰۲
زمان مطالعه: ۱۲ دقیقه
دانلود PDF مقاله
در این مقاله با سه روش برای ساخت جداول HTML با جاوا اسکریپت آشنا خواهیم شد و مزایا و معایب هر کدام از این روش‌ها را بررسی می‌کنیم. جدولی که در تصویر زیر می‌بینید همه عناصر 118-گانه شیمیایی را به همراه نام اتم، عدد اتمی و نماد شیمیایی‌شان نمایش می‌دهد. توجه کنید که در فرمول‌ها از اختصاراتی مانند H2O یا NaCl استفاده شده است.
فهرست مطالب این نوشته
این جدول به همراه کپشن، عناوین ستون‌ها و ردیف‌ها توسط جاوا اسکریپت به صورت دینامیک از یک ساختمان داده ساخته شده است که در این مورد یک آرایه از اشیا است. جداول عناصر شیمیایی در قیاس با جداول دیگر HTML نسبتاً پیچیده هستند و ممکن است برای ساخت آن‌ها به زحمت بیفتید. از این رو صرف وقت و یادگیری روشی کارآمد برای اجرا و آسان برای کدنویسی قطعاً ارزشمند خواهد بود.
چنان که پیش‌تر اشاره کردیم، در این راهنما سه روش برای ساخت جداول HTML با جاوا اسکریپت معرفی خواهیم کرد:
- ساخت جداول به صورت یک رشته منفرد HTML که در ادامه به صورت یک عملیات منفرد به سند اضافه می‌شود.
- استفاده از متدهای استاندارد دستکاری DOM به نام createElement ،createTextNode و appendChild.
- استفاده از متدهای خاص جدول به نام createCaption ،insertRow و insertCell.
در ادامه این راهنما هر کدام از این روش‌ها را به صورت جداگانه و تفصیلی توضیح خواهیم داد.
پروژه نمونه
پروژه نمونه‌ای که در این راهنما برای نمایش روش‌های مختلف ساخت جداول HTML با جاوا اسکریپت بررسی می‌کنیم شامل فایل‌های زیر به همراه یک فایل CSS و یک گرافیک است. این فایل‌ها در مجموع یک وب‌اپلیکیشن کامل را تشکیل می‌دهند. همچنین می‌توانید از این ریپازیتوری گیت‌هاب (+) آن را روی سیستم خود کلون یا دانلود کنید.
فایل 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 که بخشی از ریپازیتوری گیت‌هاب است، به صورت هاردکد قرار داده‌ایم. این کلاس متدهایی برای دریافت عناوین ستون‌ها و نام‌های مشخصه شیء نیز دارد.
برای این که با شکل ظاهری آن آشنا شوید، در کد زیر بخش آغازین داده‌های عنصر ارائه شده است:
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 با جاوا اسکریپت بررسی می‌کنیم به صورت زیر است:
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
https://b.fdrs.ir/4s
«میثم لطفی» در رشته‌های ریاضیات کاربردی و مهندسی کامپیوتر به تحصیل پرداخته و شیفته فناوری است. وی در حال حاضر علاوه بر پیگیری علاقه‌مندی‌هایش در رشته‌های برنامه‌نویسی، کپی‌رایتینگ و محتوای چندرسانه‌ای، در زمینه نگارش مقالاتی با محوریت نرم‌افزار با مجله فرادرس همکاری دارد.
مطالب مرتبط
ممنون خیلی خوب بود