مетод insertCell() TableRow

تعریف و استفاده

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 استفاده کنید که باعث می‌شود سلول جدید در انتهای موقعیت قرار گیرد.

اگر این پارامتر را مشخص نکنید، در 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 = "CELL1 جدید";
cell2.innerHTML = "CELL2 جدید";

آزمایش کنید