طريقة الإدراج ().
التعريف والاستخدام
يتم استخدام طريقة الإدراج () لإدراج صف جديد في الموضع المحدد في الجدول.
قواعد اللغة
tableObject.insertRow(الفهرس)
قيمة الإرجاع
تُرجع TableRow الذي يمثل الصف المدرج حديثًا.
يوضح
تقوم هذه الطريقة بإنشاء كائن TableRow جديد يمثل علامة <tr> جديدة وإدراجه في الجدول في الموضع المحدد.
سيتم إدراج الصف الجديد قبل الصف الموجود في الفهرس. إذا كان الفهرس يساوي عدد الصفوف في الجدول، فسيتم إلحاق الصف الجديد بنهاية الجدول.
إذا كان الجدول فارغًا، فسيتم إدراج الصف الجديد في قسم <tbody> الجديد، والذي سيتم إدراجه بنفسه في الجدول.
يرمي
إذا كان فهرس المعلمة أقل من 0 أو أكبر من أو يساوي عدد الصفوف في الجدول، فستطرح هذه الطريقة استثناء DOMException بالكود INDEX_SIZE_ERR.
مثال
انسخ رمز الكود كما يلي:
<أتش تي أم أل>
<الرأس>
<نوع البرنامج النصي = "نص/جافا سكريبت">
وظيفة insRow ()
{
document.getElementById('myTable').insertRow(0)
}
</script>
</الرأس>
<الجسم>
<معرف الجدول = "myTable">
<تر>
<td>الصف الأول من الخلية1</td>
<td>الصف الأول من الخلية2</td>
</tr>
<تر>
<td>الصف 2 الخلية 1 </ td>
<td>الصف 2 الخلية 2 </ td>
</tr>
</الجدول>
<br />
<نوع الإدخال = "زر" عند النقر = "insRow ()"
القيمة = "أدخل صفًا جديدًا">
</الجسم>
</html>
حذف الخلية ()
التعريف والاستخدام
يتم استخدام الأسلوب ()deleteCell لحذف خلية (عنصر <td>) في صف الجدول.
قواعد اللغة
tablerowObject.deleteCell(الفهرس)
يوضح
فهرس المعلمة هو الموضع في صف عنصر الجدول المراد حذفه.
ستحذف هذه الطريقة عنصر الجدول في الموضع المحدد في صف الجدول.
يرمي
إذا كان فهرس المعلمة أقل من 0 أو أكبر من أو يساوي عدد عناصر الجدول في الصف، فستطرح هذه الطريقة استثناء DOMException بالكود INDEX_SIZE_ERR.
مثال
انسخ رمز الكود كما يلي:
<أتش تي أم أل>
<الرأس>
<نوع البرنامج النصي = "نص/جافا سكريبت">
دالة ديل رو ()
{
document.getElementById('myTable').deleteRow(0)
}
</script>
</الرأس>
<الجسم>
<معرف الجدول = "myTable">
<تر>
<td>الصف الأول من الخلية1</td>
<td>الصف الأول من الخلية2</td>
</tr>
<تر>
<td>الصف 2 الخلية 1 </ td>
<td>الصف 2 الخلية 2 </ td>
</tr>
</الجدول>
<br />
<نوع الإدخال = "زر" عند النقر = "delRow ()"
القيمة = "حذف الصف الأول">
</الجسم>
</html>
إدراج خلية ()
التعريف والاستخدام
يتم استخدام طريقة InsertCell () لإدراج عنصر <td> فارغ في موضع محدد في صف جدول HTML.
قواعد اللغة
tablerowObject.insertCell(الفهرس)
قيمة الإرجاع
كائن TableCell يمثل عنصر <td> الذي تم إنشاؤه وإدراجه حديثًا.
يوضح
تقوم هذه الطريقة بإنشاء عنصر <td> جديد وإدراجه في الصف في الموضع المحدد. سيتم إدراج الخلية الجديدة قبل الخلية الموجودة حاليًا في الموضع المحدد بواسطة الفهرس. إذا كان الفهرس يساوي عدد الخلايا في الصف، فسيتم إلحاق الخلية الجديدة بنهاية الصف.
يرجى ملاحظة أن هذه الطريقة يمكنها فقط إدراج عناصر جدول البيانات <td>. إذا كنت بحاجة إلى إضافة عنصر رأس إلى صف، فيجب عليك إنشاء عنصر <th> وإدراجه باستخدام الطريقة Document.createElement() والطريقة Node.insertBefore() (أو الطرق ذات الصلة).
يرمي
إذا كان فهرس المعلمة أقل من 0 أو أكبر من أو يساوي عدد عناصر الجدول في الصف، فستطرح هذه الطريقة استثناء DOMException بالكود INDEX_SIZE_ERR.
مثال
انسخ رمز الكود كما يلي:
<أتش تي أم أل>
<الرأس>
<نوع البرنامج النصي = "نص/جافا سكريبت">
الدالة insCell()
{
فار x=document.getElementById('tr2').insertCell(0)
x.innerHTML="جون"
}
</script>
</الرأس>
<الجسم>
<الجدول>
<tr معرف = "tr1">
<th>الاسم الأول</th>
<th>اسم العائلة</th>
</tr>
<tr معرف = "tr2">
<td>بيتر</td>
<td>غريفين</td>
</tr>
</الجدول>
<br />
<نوع الإدخال = "زر" onclick = "insCell ()" قيمة = "أدخل خلية">
</الجسم>
</html>
حذف الخلية ()
التعريف والاستخدام
يتم استخدام الأسلوب ()deleteCell لحذف خلية (عنصر <td>) في صف الجدول.
قواعد اللغة
tablerowObject.deleteCell(الفهرس)
يوضح
فهرس المعلمة هو الموضع في صف عنصر الجدول المراد حذفه.
ستحذف هذه الطريقة عنصر الجدول في الموضع المحدد في صف الجدول.
يرمي
إذا كان فهرس المعلمة أقل من 0 أو أكبر من أو يساوي عدد عناصر الجدول في الصف، فستطرح هذه الطريقة استثناء DOMException بالكود INDEX_SIZE_ERR.
مثال
انسخ رمز الكود كما يلي:
<أتش تي أم أل>
<الرأس>
<نوع البرنامج النصي = "نص/جافا سكريبت">
دالة ديلسيل ()
{
document.getElementById('tr2').deleteCell(0)
}
</script>
</الرأس>
<الجسم>
<الجدول>
<tr معرف = "tr1">
<th>الاسم الأول</th>
<th>اسم العائلة</th>
</tr>
<tr معرف = "tr2">
<td>بيتر</td>
<td>غريفين</td>
</tr>
</الجدول>
<br />
<input type = "button" onclick = "delCell ()" value = "حذف الخلية">
</الجسم>
</html>
التطبيقات في المشروع:
انسخ رمز الكود كما يلي:
<نوع البرنامج النصي = "نص/جافا سكريبت">
vartrIndex = 0;
// إضافة الصفوف ديناميكيًا
unction appendConvert(){
//var sel = document.getElementById("selectConvertName");
var sel = document.getElementsByName("selectConvertName")[0];
فار فئة اسم؛
إذا (فارغة!=سيل){
for(var i = 0; i < sel.options.length; i++){
إذا (sel.options[i].selected)
className=sel.options[i].value;
}
}
// تأتي البيانات من تنسيق ajax وjson.
تحويل.getConvertBean2Json(اسم الفئة،
وظيفة (نتيجة) {
var obj = eval('('+result+')');
جدول var = document.getElementById("convertTable");
var newRow = table.insertRow(trIndex+1);
newRow.insertCell(0).innerHTML = obj.name+"<input type='button' value='Delete' onclick='deleteRow(this)'>";
newRow.insertCell(1).innerHTML = "<input type='text' name='convertList["+trIndex+"].id'><input type='hidden' name='convertList["+trIndex+"].name ' value='"+obj.name+"'>";
إذا(خالية!=obj.paramList){
var paramStr = "";
for(var i = 0; i < obj.paramList.length; i++){
paramStr = paramStr+
"اسم المعلمة:"+obj.paramList[i].name+
";نوع المعلمة:"+obj.paramList[i].type+
"؛ قيمة المعلمة: <input name='convertList["+trIndex+"].paramList["+i+"].value' type='text'><br>"+
"<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].name' value='"+obj.paramList[i].name+"'>"+
"<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].type' value='"+obj.paramList[i].type+"'>";
}
newRow.insertCell(2).innerHTML = paramStr;
}
trIndex++;
});
}
//حذف الصف
على حذف الصف (ص) {
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('convertTable').deleteRow(i);
trIndex--;
}
</script>