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

0

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

حسین برخورداری پاسخ داد اکتبر 18, 2020
دیدگاهتان را بنویسید
2

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

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

<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);

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

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

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

حسین برخورداری پاسخ داد اکتبر 18, 2020
دیدگاهتان را بنویسید
شما در حال مرور یکی از 1 مورد پاسخ هستید، برای دیدن همه پاسخ ها کلیک کنید.
نوشتن پاسخ
  • فعالسازی
  • بازدیدها2377 بار
  • پاسخ1 پاسخ
ورود به متاورس | متاورس ایرانی
ورود به متاورس ایران یا همان متاورس ملی

علامت ذره بین Tutorials سمت راست به رنگ قرمز به شما کمک خواهد کرد .

جدید ترین سوالات پرسیده شده

منقضی شدن سم بتانال پاسخ 1 | 0 رأی
ایا ایدز گزفتم؟ پاسخ 0 | 0 رأی
انتخاب ورزش رزمی پاسخ 0 | 1 رأی
وزارت تعاون کار و رفاه اجتماعی اسناد و املاک کشور مرکز آموزش ویدیویی انجمن پرسش و پاسخ فروشگاه ملی تولید کنندگان مدیریت بر مدیران حم رسانه ملی اخبار متا دانشگاه متاورس استخدام | دانش محور فروشگاه مجازی حم تبلیغات ملی بازار NFT متاورس رنگ نقشه ملی سه بعدی متا تونل زمان متاآرت وبرنگ خانه