TableRow insertCell() 方法

HTML DOM TableRow objekti

定义和用法

insertCell() 方法将单元格插入到当前行中。

提示：请使用 deleteCell() 方法 删除当前表格行中的单元格。

另请参阅：

HTML 参考手册：HTML <tr> tagi

实例

例子 1

在 id="myRow" 的表格行的开头插入包含内容的新单元格：

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

Kokeile itse

页面下方提供更多实例。

语法

tablerowObject.insertCell()index)
Parametri Kuvaus
index

On pakollinen Firefox ja Operassa, valinnainen IE, Chrome ja Safari:ssä.

Luku (alkaen 0), joka määrittää uuden solun sijainnin nykyisessä rivissä.

Arvo 0 lisää uuden solun ensimmäiseen sijaintiin. Voit myös käyttää arvoa -1, joka lisää uuden solun viimeiseen sijaintiin.

Jos tämä parametri jätetään pois, insertCell() lisää IE:ssä uuden solun viimeiseen sijaintiin, Chrome ja Safari lisäävät sen ensimmäiseen sijaintiin.

Tekninen yksityiskohta

Palautusarvo:

Lisätty solu-elementti.

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki

Lisää esimerkkejä

Esimerkki 2

Lisää sisällöllinen solu id="myRow" -taulukorivin loppuun:

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

Kokeile itse

Esimerkki 3

Lisää sisällöllinen solu id="myRow" -taulukorivin indeksiin 2:

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

Kokeile itse

Esimerkki 4

Lisää uusi solu ensimmäisen taulukorivin alkuun. Taulukon rows -sarja (.rows[0]) palauttaa id:llä "myTable" varustettujen kaikkien <tr> -elementtien joukon.

Luku [0] määrittää haettavan elementin, tässä tapauksessa ensimmäinen taulukorivi. Sitten käytämme insertcell() -menetelmää lisätäksemme uuden solun indeksiin -1:

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

Kokeile itse

Esimerkki 5

Poista ensimmäinen solu id="myRow" -taulukorivistä:

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

Kokeile itse

Esimerkki 6

Lisää uusi rivi taulukon alkuun.

insertRow() -menetelmä lisää uuden rivin tietystä indeksistä taulukkoon, tässä tapauksessa id="myTable" -taulukon ensimmäisessä sijainnissa (alku).

Sitten käytämme insertCell() -menetelmää lisätäksemme solun uuteen rivityyppiin.

var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "Uusi solu 1";
cell2.innerHTML = "Uusi solu 2";

Kokeile itse

HTML DOM TableRow objekti