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

۱۵۷ بازدید
آخرین به‌روزرسانی: ۲ شهریور ۱۳۹۹
زمان مطالعه: ۱۲ دقیقه
ساخت جداول HTML با جاوا اسکریپت

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

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

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

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

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

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

پروژه نمونه

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

فایل creatingtables.htm

<!DOCTYPE html>

<html lang="en">

<head>
	<title>CodeDrome - Creating HTML Tables with JavaScript</title>
    <meta charset="utf-8" />
    <link href="projects.css" rel="stylesheet" />
</head>

<body>

	<div class="maindiv">

		<div class="banner"></div>

		<div class="contentdiv roundcorners" id="tablediv">

		</div>

	</div>

    <script src="elements.js"></script>
    <script src="creatinghtmltables.js"></script>

</body>

</html>

فایل creatingtables.js

window.onload = function()
{
    createTable1();

    // createTable2();

    // createTable3();
}


function createTable1()
{
    const elements = Elements.GetElements();
    const headings = Elements.GetHeadings();
    const properties = Elements.GetProperties();

    // start table and add caption
    let tablehtml = "<table><caption>Elements</caption>";

    // insert row of headings
    tablehtml  += "<tr>";
    for(let heading of headings)
    {
        tablehtml  += `<th>${heading}</th>`;
    }
    tablehtml += "</tr>";

    // iterate data and add row of cells for each
    for(let element of elements)
    {
        tablehtml  += "<tr>";

        for(let property of properties)
        {
            tablehtml  += `<td>${element[property]}</td>`;
        }

        tablehtml  += "</tr>";
    }

    // end of table
    tablehtml += "</table>";

    // add table to the empty div
    document.getElementById("tablediv").innerHTML = tablehtml;
}

function createTable2()
{
    const elements = Elements.GetElements();
    const headings = Elements.GetHeadings();
    const properties = Elements.GetProperties();

    // create table
    const table = document.createElement("table");

    // create caption and add to table
    const caption = document.createElement("caption");
    const captiontext = document.createTextNode("Elements");
    caption.appendChild(captiontext);
    table.appendChild(caption);

    // create row for headings...
    const hrow = document.createElement("tr");
    table.appendChild(hrow);

    // ...and add cells to it
    for(let heading of headings)
    {
        const th = document.createElement("th");
        const thtext = document.createTextNode(heading);
        th.appendChild(thtext);
        hrow.appendChild(th);
    }

    // iterate data, adding rows and cells for each item
    for(let element of elements)
    {
        const drow = document.createElement("tr");
        table.appendChild(drow);

        for(let property of properties)
        {
            const td = document.createElement("td");
            const tdtext = document.createTextNode(element[property]);
            td.appendChild(tdtext);
            drow.appendChild(td);
        }
    }

    // add table to div
    document.getElementById("tablediv").appendChild(table);
}

function createTable3()
{
    const elements = Elements.GetElements();
    const headings = Elements.GetHeadings();
    const properties = Elements.GetProperties();

    // create a table
    const table = document.createElement("table");

    // add a caption
    table.createCaption().textContent = "Elements";

    // insert a row and add headings to it
    const hrow = table.insertRow();
    for(let heading of headings)
    {
        hrow.insertCell(-1).outerHTML = `<th>${heading}</th>`;
    }

    // iterate data, adding rows and cells for each element
    for(let element of elements)
    {
        const drow = table.insertRow(-1);

        for(let property of properties)
        {
            drow.insertCell(-1).innerHTML = element[property];
            // OR
            // drow.insertCell(-1).appendChild(document.createTextNode(element[property]));
        }
    }

    // add table to div
    document.getElementById("tablediv").appendChild(table);
}

فایل elements.js

class Elements
{
    static GetHeadings()
    {
        return ["Name", "Atomic Number", "Chemical Symbol"];
    }

    static GetProperties()
    {
        return ["name", "atomicnumber", "symbol"];
    }

    static GetElements()
    {
        return [
        {
            name: "Hydrogen",
            atomicnumber: 1,
            symbol: "H"
        },
        {
            name: "Helium",
            atomicnumber: 2,
            symbol: "He"
        },
        {
            name: "Lithium",
            atomicnumber: 3,
            symbol: "Li"
        },
        {
            name: "Beryllium",
            atomicnumber: 4,
            symbol: "Be"
        },
        {
            name: "Boron",
            atomicnumber: 5,
            symbol: "B"
        },
        {
            name: "Carbon",
            atomicnumber: 6,
            symbol: "C"
        },
        {
            name: "Nitrogen",
            atomicnumber: 7,
            symbol: "N"
        },
        {
            name: "Oxygen",
            atomicnumber: 8,
            symbol: "O"
        },
        {
            name: "Fluorine",
            atomicnumber: 9,
            symbol: "F"
        },
        {
            name: "Neon",
            atomicnumber: 10,
            symbol: "Ne"
        },
        {
            name: "Sodium",
            atomicnumber: 11,
            symbol: "Na"
        },
        {
            name: "Magnesium",
            atomicnumber: 12,
            symbol: "Mg"
        },
        {
            name: "Aluminium",
            atomicnumber: 13,
            symbol: "Al"
        },
        {
            name: "Silicon",
            atomicnumber: 14,
            symbol: "Si"
        },
        {
            name: "Phosphorus",
            atomicnumber: 15,
            symbol: "P"
        },
        {
            name: "Sulfur",
            atomicnumber: 16,
            symbol: "S"
        },
        {
            name: "Chlorine",
            atomicnumber: 17,
            symbol: "Cl"
        },
        {
            name: "Argon",
            atomicnumber: 18,
            symbol: "Ar"
        },
        {
            name: "Potassium",
            atomicnumber: 19,
            symbol: "K"
        },
        {
            name: "Calcium",
            atomicnumber: 20,
            symbol: "Ca"
        },
        {
            name: "Scandium",
            atomicnumber: 21,
            symbol: "Sc"
        },
        {
            name: "Titanium",
            atomicnumber: 22,
            symbol: "Ti"
        },
        {
            name: "Vanadium",
            atomicnumber: 23,
            symbol: "V"
        },
        {
            name: "Chromium",
            atomicnumber: 24,
            symbol: "Cr"
        },
        {
            name: "Manganese",
            atomicnumber: 25,
            symbol: "Mn"
        },
        {
            name: "Iron",
            atomicnumber: 26,
            symbol: "Fe"
        },
        {
            name: "Cobalt",
            atomicnumber: 27,
            symbol: "Co"
        },
        {
            name: "Nickel",
            atomicnumber: 28,
            symbol: "Ni"
        },
        {
            name: "Copper",
            atomicnumber: 29,
            symbol: "Cu"
        },
        {
            name: "Zinc",
            atomicnumber: 30,
            symbol: "Zn"
        },
        {
            name: "Gallium",
            atomicnumber: 31,
            symbol: "Ga"
        },
        {
            name: "Germanium",
            atomicnumber: 32,
            symbol: "Ge"
        },
        {
            name: "Arsenic",
            atomicnumber: 33,
            symbol: "As"
        },
        {
            name: "Selenium",
            atomicnumber: 34,
            symbol: "Se"
        },
        {
            name: "Bromine",
            atomicnumber: 35,
            symbol: "Br"
        },
        {
            name: "Krypton",
            atomicnumber: 36,
            symbol: "Kr"
        },
        {
            name: "Rubidium",
            atomicnumber: 37,
            symbol: "Rb"
        },
        {
            name: "Strontium",
            atomicnumber: 38,
            symbol: "Sr"
        },
        {
            name: "Yttrium",
            atomicnumber: 39,
            symbol: "Y"
        },
        {
            name: "Zirconium",
            atomicnumber: 40,
            symbol: "Zr"
        },
        {
            name: "Niobium",
            atomicnumber: 41,
            symbol: "Nb"
        },
        {
            name: "Molybdenum",
            atomicnumber: 42,
            symbol: "Mo"
        },
        {
            name: "Technetium",
            atomicnumber: 43,
            symbol: "Tc"
        },
        {
            name: "Ruthenium",
            atomicnumber: 44,
            symbol: "Ru"
        },
        {
            name: "Rhodium",
            atomicnumber: 45,
            symbol: "Rh"
        },
        {
            name: "Palladium",
            atomicnumber: 46,
            symbol: "Pd"
        },
        {
            name: "Silver",
            atomicnumber: 47,
            symbol: "Ag"
        },
        {
            name: "Cadmium",
            atomicnumber: 48,
            symbol: "Cd"
        },
        {
            name: "Indium",
            atomicnumber: 49,
            symbol: "In"
        },
        {
            name: "Tin",
            atomicnumber: 50,
            symbol: "Sn"
        },
        {
            name: "Antimony",
            atomicnumber: 51,
            symbol: "Sb"
        },
        {
            name: "Tellurium",
            atomicnumber: 52,
            symbol: "Te"
        },
        {
            name: "Iodine",
            atomicnumber: 53,
            symbol: "I"
        },
        {
            name: "Xenon",
            atomicnumber: 54,
            symbol: "Xe"
        },
        {
            name: "Caesium",
            atomicnumber: 55,
            symbol: "Cs"
        },
        {
            name: "Barium",
            atomicnumber: 56,
            symbol: "Ba"
        },
        {
            name: "Lanthanum",
            atomicnumber: 57,
            symbol: "La"
        },
        {
            name: "Cerium",
            atomicnumber: 58,
            symbol: "Ce"
        },
        {
            name: "Praseodymium",
            atomicnumber: 59,
            symbol: "Pr"
        },
        {
            name: "Neodymium",
            atomicnumber: 60,
            symbol: "Nd"
        },
        {
            name: "Promethium",
            atomicnumber: 61,
            symbol: "Pm"
        },
        {
            name: "Samarium",
            atomicnumber: 62,
            symbol: "Sm"
        },
        {
            name: "Europium",
            atomicnumber: 63,
            symbol: "Eu"
        },
        {
            name: "Gadolinium",
            atomicnumber: 64,
            symbol: "Gd"
        },
        {
            name: "Terbium",
            atomicnumber: 65,
            symbol: "Tb"
        },
        {
            name: "Dysprosium",
            atomicnumber: 66,
            symbol: "Dy"
        },
        {
            name: "Holmium",
            atomicnumber: 67,
            symbol: "Ho"
        },
        {
            name: "Erbium",
            atomicnumber: 68,
            symbol: "Er"
        },
        {
            name: "Thulium",
            atomicnumber: 69,
            symbol: "Tm"
        },
        {
            name: "Ytterbium",
            atomicnumber: 70,
            symbol: "Yb"
        },
        {
            name: "Lutenium",
            atomicnumber: 71,
            symbol: "Lu"
        },
        {
            name: "Hafnium",
            atomicnumber: 72,
            symbol: "Hf"
        },
        {
            name: "Tantalum",
            atomicnumber: 73,
            symbol: "Ta"
        },
        {
            name: "Tungsten",
            atomicnumber: 74,
            symbol: "W"
        },
        {
            name: "Rhenium",
            atomicnumber: 75,
            symbol: "Re"
        },
        {
            name: "Osmium",
            atomicnumber: 76,
            symbol: "Os"
        },
        {
            name: "Iridium",
            atomicnumber: 77,
            symbol: "Ir"
        },
        {
            name: "Platinum",
            atomicnumber: 78,
            symbol: "Pt"
        },
        {
            name: "Gold",
            atomicnumber: 79,
            symbol: "Au"
        },
        {
            name: "Mercury",
            atomicnumber: 80,
            symbol: "Hg"
        },
        {
            name: "Thallium",
            atomicnumber: 81,
            symbol: "Tl"
        },
        {
            name: "Lead",
            atomicnumber: 82,
            symbol: "Pb"
        },
        {
            name: "Bismuth",
            atomicnumber: 83,
            symbol: "Bi"
        },
        {
            name: "Polonium",
            atomicnumber: 84,
            symbol: "Po"
        },
        {
            name: "Astatine",
            atomicnumber: 85,
            symbol: "At"
        },
        {
            name: "Radon",
            atomicnumber: 86,
            symbol: "Rn"
        },
        {
            name: "Francium",
            atomicnumber: 87,
            symbol: "Fr"
        },
        {
            name: "Radium",
            atomicnumber: 88,
            symbol: "Ra"
        },
        {
            name: "Actinium",
            atomicnumber: 89,
            symbol: "Ac"
        },
        {
            name: "Thorium",
            atomicnumber: 90,
            symbol: "Th"
        },
        {
            name: "Protactinium",
            atomicnumber: 91,
            symbol: "Pa"
        },
        {
            name: "Uranium",
            atomicnumber: 92,
            symbol: "U"
        },
        {
            name: "Neptunium",
            atomicnumber: 93,
            symbol: "Np"
        },
        {
            name: "Plutonium",
            atomicnumber: 94,
            symbol: "Pu"
        },
        {
            name: "Americium",
            atomicnumber: 95,
            symbol: "Am"
        },
        {
            name: "Curium",
            atomicnumber: 96,
            symbol: "Cm"
        },
        {
            name: "Berkelium",
            atomicnumber: 97,
            symbol: "Bk"
        },
        {
            name: "Californium",
            atomicnumber: 98,
            symbol: "Cf"
        },
        {
            name: "Einsteinium",
            atomicnumber: 99,
            symbol: "Es"
        },
        {
            name: "Fermium",
            atomicnumber: 100,
            symbol: "Fm"
        },
        {
            name: "Mendelevium",
            atomicnumber: 101,
            symbol: "Md"
        },
        {
            name: "Nobelium",
            atomicnumber: 102,
            symbol: "No"
        },
        {
            name: "Lawrencium",
            atomicnumber: 103,
            symbol: "Lr"
        },
        {
            name: "Rutherfordium",
            atomicnumber: 104,
            symbol: "Rf"
        },
        {
            name: "Dubnium",
            atomicnumber: 105,
            symbol: "Db"
        },
        {
            name: "Seaborgium",
            atomicnumber: 106,
            symbol: "Sg"
        },
        {
            name: "Bohrium",
            atomicnumber: 107,
            symbol: "Bh"
        },
        {
            name: "Hassium",
            atomicnumber: 108,
            symbol: "Hs"
        },
        {
            name: "Meitnerium",
            atomicnumber: 109,
            symbol: "Mt"
        },
        {
            name: "Darmstadtium",
            atomicnumber: 110,
            symbol: "Ds"
        },
        {
            name: "Roentgenium",
            atomicnumber: 111,
            symbol: "Rg"
        },
        {
            name: "Copernicum",
            atomicnumber: 112,
            symbol: "Cn"
        },
        {
            name: "Nihonium",
            atomicnumber: 113,
            symbol: "Nh"
        },
        {
            name: "Flerovium",
            atomicnumber: 114,
            symbol: "Fl"
        },
        {
            name: "Moscovium",
            atomicnumber: 115,
            symbol: "Mc"
        },
        {
            name: "Livermorium",
            atomicnumber: 116,
            symbol: "Lv"
        },
        {
            name: "Tennessine",
            atomicnumber: 117,
            symbol: "Ts"
        },
        {
            name: "Oganesson",
            atomicnumber: 118,
            symbol: "Og"
        }
    ]
    }
}

فایل prohects.css

.maindiv
{
    background-color: #282C34;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
}

.banner
{
    position: absolute;
    left:8px;
    top: 8px;
    width: 681px;
    height: 42px;
    background-image: url("banner.png");
}

.linkpanel
{
    cursor: pointer;
    cursor: hand;
    color:#ffffff;
    position: absolute;
    right: 16px;
    top: 8px;
    height: 42px;
    line-height: 42px;
}

.contentdiv
{
    position: absolute;
    color: #000000;
    left: 16px;
    right: 16px;
    top: 58px;
    bottom: 16px;
    font-family: Courier, monospace;
    font-weight: bold;
    background-color: #FFFFFF;
    overflow: auto;
    padding: 8px;
}

A:link {text-decoration: none; color:#FFFFFF; outline : none; border : 0;}
A:visited {text-decoration: none; color:#FFFFFF; outline : none; border : 0;}
A:active {text-decoration: none; color:#FFFFFF; outline : none; border : 0;}
A:hover {text-decoration: underline; color:#FFFFFF; outline : none; border : 0;}


.roundcorners
{
	background: #FFFFFF;
	border:2px solid #404040;
    border-radius: 4px 4px 4px 4px;
}

table
{
    border-collapse: collapse;
}

td
{
    border: 1px solid #000000;
    padding: 4px;
    font-family: sans-serif;
    font-size: small;
    color: #202020;
}

th
{
    border: 1px solid #000000;
    padding: 4px;
    font-family: sans-serif;
    font-size: small;
    color: #FFFFFF;
    font-weight: bold;
    background-color: #282C34;
}

caption
{
    border-style: solid;
    border-color: #000000;
    border-width: 1px 1px 0px 1px;
    padding: 4px;
    font-family: sans-serif;
    font-size: medium;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #282C34;
}

منبع داده‌ها

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

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

class Elements
{
    static GetHeadings()
    {
        return ["Name", "Atomic Number", "Chemical Symbol"];
    }

    static GetProperties()
    {
        return ["name", "atomicnumber", "symbol"];
    }

    static GetElements()
    {
        return [
        {
            name: "Hydrogen",
            atomicnumber: 1,
            symbol: "H"
        },
        {
            name: "Helium",
            atomicnumber: 2,
            symbol: "He"
        },
.
.
.
.

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

window.onload = function()
{
    createTable1();

    // createTable2();

    // createTable3();
}

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

رویکرد اول

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

function createTable1()
{
    const elements = Elements.GetElements();
    const headings = Elements.GetHeadings();
    const properties = Elements.GetProperties();

    // start table and add caption
    let tablehtml = "<table><caption>Elements</caption>";

    // insert row of headings
    tablehtml  += "<tr>";
    for(let heading of headings)
    {
        tablehtml  += `<th>${heading}</th>`;
    }
    tablehtml += "</tr>";

    // iterate data and add row of cells for each
    for(let element of elements)
    {
        tablehtml  += "<tr>";

        for(let property of properties)
        {
            tablehtml  += `<td>${element[property]}</td>`;
        }

        tablehtml  += "</tr>";
    }

    // end of table
    tablehtml += "</table>";

    // add table to the empty div
    document.getElementById("tablediv").innerHTML = tablehtml;
}

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

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

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

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

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

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

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

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

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

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

رویکرد دوم

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

function createTable2()
{
    const elements = Elements.GetElements();
    const headings = Elements.GetHeadings();
    const properties = Elements.GetProperties();

    // create table
    const table = document.createElement("table");

    // create caption and add to table
    const caption = document.createElement("caption");
    const captiontext = document.createTextNode("Elements");
    caption.appendChild(captiontext);
    table.appendChild(caption);

    // create row for headings...
    const hrow = document.createElement("tr");
    table.appendChild(hrow);

    // ...and add cells to it
    for(let heading of headings)
    {
        const th = document.createElement("th");
        const thtext = document.createTextNode(heading);
        th.appendChild(thtext);
        hrow.appendChild(th);
    }

    // iterate data, adding rows and cells for each item
    for(let element of elements)
    {
        const drow = document.createElement("tr");
        table.appendChild(drow);

        for(let property of properties)
        {
            const td = document.createElement("td");
            const tdtext = document.createTextNode(element[property]);
            td.appendChild(tdtext);
            drow.appendChild(td);
        }
    }

    // add table to div
    document.getElementById("tablediv").appendChild(table);
}

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

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

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

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

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

رویکرد سوم

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

function createTable3()
{
    const elements = Elements.GetElements();
    const headings = Elements.GetHeadings();
    const properties = Elements.GetProperties();

    // create a table
    const table = document.createElement("table");

    // add a caption
    table.createCaption().textContent = "Elements";

    // insert a row and add headings to it
    const hrow = table.insertRow();
    for(let heading of headings)
    {
        hrow.insertCell(-1).outerHTML = `<th>${heading}</th>`;
    }

    // iterate data, adding rows and cells for each element
    for(let element of elements)
    {
        const drow = table.insertRow(-1);

        for(let property of properties)
        {
            drow.insertCell(-1).innerHTML = element[property];
            // OR
            // drow.insertCell(-1).appendChild(document.createTextNode(element[property]));
        }
    }

    // add table to div
    document.getElementById("tablediv").appendChild(table);
}

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

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

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

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

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

سخن پایانی

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

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

بر اساس رای ۲ نفر
آیا این مطلب برای شما مفید بود؟
شما قبلا رای داده‌اید!
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
javascript-in-plain-english
One thought on “ساخت جداول HTML با جاوا اسکریپت — از صفر تا صد

ممنون خیلی خوب بود

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *