متدهای مربوطه به جداول در جاوا اسکریپت را شرح دهید .
متدهای مربوطه به جداول در جاوا اسکریپت را شرح دهید .
متدهای مربوطه به جداول در جاوا اسکریپت را شرح دهید .
فرض کنید که می خواهیم جدول زیر را به صورت پویا و با استفاده از جاوااسکریپت ایجاد کنیم:
<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);
منبع : انجمن علمی مهندسی فناوری اطلاعات دانشگاه پیام تور مرکز اران و بید گل
برای اموزش های ویدیویی زبان جاوا اسکیریپت به بستر ویدیو های اموزشی بروید
ثبت نام
با ایمیل خود وارد شویدورود
