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

Question

حسین برخورداری · Answer

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

Cell 1,1	Cell 2,1
Cell 1,2	Cell 2,2

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