متدهای مربوطه به جداول در جاوا اسکریپت را شرح دهید .

متدهای مربوطه به جداول در جاوا اسکریپت را شرح دهید .

فرض کنید که می خواهیم جدول زیر را به صورت پویا و با استفاده از جاوااسکریپت ایجاد کنیم:

<table border=”1” width=”100%”>
<tbody>
<tr>
<td>Cell 1,1</td>
<td>Cell 2,1</td>
</tr>
<tr>
<td>Cell 1,2</td>
<td>Cell 2,2</td>
</tr>
</tbody>
</table>

اگر براي ایجاد این جدول بخواهیم از متد هاي رایج DOM استفاده کنیم کد ما به صورت ذیل بسیار طولانی و گاهی اوقات سردرگم کننده خواهد شد:

var oTable = document.createElement(“table”);
oTable.setAttribute(“border”, “1”);
oTable.setAttribute(“width”, “100%”);
//create the tbody
var oTBody = document.createElement(“tbody”);
oTable.appendChild(oTBody);
//create the first row
var oTR1 = document.createElement(“tr”);
oTBody.appendChild(oTR1);
var oTD11 = document.createElement(“td”);
oTD11.appendChild(document.createTextNode(“Cell 1,1”));
oTR1.appendChild(oTD11);
var oTD21 = document.createElement(“td”);
oTD21.appendChild(document.createTextNode(“Cell 2,1”));
oTR1.appendChild(oTD21);
//create the second row
var oTR2 = document.createElement(“tr”);
oTBody.appendChild(oTR2);
var oTD12 = document.createElement(“td”);
oTD12.appendChild(document.createTextNode(“Cell 1,2”));
oTR2.appendChild(oTD12);
var oTD22 = document.createElement(“td”);
oTD22.appendChild(document.createTextNode(“Cell 2,2”));
oTR2.appendChild(oTD22);
//add the table to the document body
document.body.appendChild(oTable);

براي آسانی اینکار DOM یکسري خاصیت ها و متد هاي منحصر به فردي براي عناصر اصلی جداول همچون table, tody, tr ایجاد کرده است.

متد ها و خاصیت هاي منحصر به فرد جدول به شرح زیر می باشد:

caption اشاره به عنصر :caption جدول دارد. (البته اگر وجود داشته باشد.)

tBodies مجموعه (آرایه) اي از عناصر tbody

:deleteTfoot() حذف عنصر tfoot از جدول

deleteCaption() حذف ردیفی از جدول که در موقعیت position قرار دارد

:insertRow(position) قرار دادن ردیفی در موقعیت position

متد ها و خاصیت هاي tbody

• Rows مجموعه از ردیف ها در عنصر tbody
• deleteRow(position) حذف ردیفی در موقعیت position
• :insertRow(position) قراردادن ردیفی در موقعیت position مجموعه اي از ردیف ها

متد ها و خاصیت هاي tr

• Cells مجموعه اي از سلو ل ها در یک ردیف
• deleteCell(position) حذف سلولی در موقعیت position
• :insertCell(position) قرار دادن سلولی در موقعیت position مجموعه اي از سلول ها.

براي ایجاد جدول قبلی کد ما به صورت زیر خواهد بود:

//create the table
var oTable = document.createElement(“table”);
oTable.setAttribute(“border”, “1”);
oTable.setAttribute(“width”, “100%”);
//create the tbody
var oTBody = document.createElement(“tbody”);
oTable.appendChild(oTBody);
//create the first row
oTBody.insertRow(0);
oTBody.rows[0].insertCell(0);
oTBody.rows[0].cells[0].appendChild(document.createTextNode(“Cell
1,1”));
oTBody.rows[0].insertCell(1);
oTBody.rows[0].cells[1].appendChild(document.createTextNode(“Cell
2,1”));
//create the second row
oTBody.insertRow(1);
oTBody.rows[1].insertCell(0);
oTBody.rows[1].cells[0].appendChild(document.createTextNode(“Cell
1,2”));
oTBody.rows[1].insertCell(1);
oTBody.rows[1].cells[1].appendChild(document.createTextNode(“Cell
2,2”));
//add the table to the document body
document.body.appendChild(oTable);

منبع : انجمن علمی مهندسی فناوری اطلاعات دانشگاه پیام تور مرکز اران و بید گل

برای اموزش های ویدیویی زبان جاوا اسکیریپت به بستر ویدیو های اموزشی بروید

بستر اموزش های ویدویی