طريقة insertCell() لـ TableRow

مفهوم TableRow DOM HTML

التعريف والاستخدام

insertCell() تضيف الخلية إلى السطر الحالي.

نصيحة:يرجى استخدام طريقة deleteCell() حذف خلية من السطر الحالي للجدول.

يرجى الرجوع أيضًا إلى:

دليل مرجع HTML:علامة <tr> HTML

المثال

مثال 1

أضف خلية جديدة تحتوي على محتوى في بداية سطر الجدول الذي يحتوي على id="myRow":

var row = document.getElementById("myRow");
var x = row.insertCell(0);
x.innerHTML = "New cell";

تجربة شخصية

يقدم لكم المزيد من الأمثلة في أسفل الصفحة.

النحو

tablerowObject.insertCell()index)
المعامل وصف
index

مطلوب في Firefox وOpera، واختياري في IE وChrome وSafari.

رقم (بدءًا من 0) يحدد موقع الخلية الجديدة في السطر الحالي.

القيمة 0 تؤدي إلى إدراج الخلية الجديدة في الموقع الأول. يمكن أيضًا استخدام القيمة -1، مما يؤدي إلى إدراج الخلية الجديدة في آخر موقع.

إذا تم تمرير هذا المعامل إلى اليمين، فإن insertCell() في IE سيتم في آخر موقع، وفي Chrome وSafari في أول موقع.

تفاصيل التقنية

القيمة المُرجعة:

عنصر الخلية المُدرجة.

دعم المتصفحات

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
دعم دعم دعم دعم دعم

مزيد من الأمثلة

مثال 2

إدراج خلية جديدة تحتوي على محتوى في نهاية سطر الجدول الذي يحمل id="myRow":

var row = document.getElementById("myRow");
var x = row.insertCell(-1);
x.innerHTML = "New cell";

تجربة شخصية

مثال 3

إدراج خلية جديدة تحتوي على محتوى في موقع 2 من سطر الجدول الذي يحمل id="myRow":

var row = document.getElementById("myRow");
var x = row.insertCell(2);
x.innerHTML = "New cell";

تجربة شخصية

مثال 4

إدراج خلية جديدة في بداية السطر الأول للجدول. مجموعة rows (.rows[0]) تعود بمجموعة جميع عناصر <tr> في الجدول الذي يحمل id="myTable".

رقم [0] يحدد العنصر الذي يتم البحث عنه، وفي هذا المثال، هو السطر الأول للجدول. ثم نستخدم insertcell() في موقع -1 لإدراج خلية جديدة في هذا الموقع:

var firstRow = document.getElementById("myTable").rows[0];
var x = firstRow.insertCell(-1);
x.innerHTML = "New cell";

تجربة شخصية

مثال 5

إزالة الخلية الأولى من السطر في الجدول الذي يحمل id="myRow":

var row = document.getElementById("myRow");
row.deleteCell(0);

تجربة شخصية

مثال 6

إدراج سطر جديد في بداية الجدول.

تضيف طريقة insertRow() سطرًا جديدًا في مكان محدد في الجدول، وفي هذا المثال، في أول موقع (البداية) للجدول الذي يحمل id="myTable".

ثم نستخدم طريقة insertCell() لإضافة خلية جديدة في السطر الجديد.

var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";

تجربة شخصية

مفهوم TableRow DOM HTML