tr insertCell()メソッド
tr オブジェクト
定義と使い方
insertCell() メソッドは、HTML テーブルの行の指定された位置に空の <td> 要素を挿入するために使用されます。
構文
trObject.insertCell(index)
| 值 | 説明 |
|---|---|
| index | このメソッドは、新しい <td> 要素を作成し、それを行の指定された位置に挿入します。新しいセルは、index で指定された位置にある現在のセルの前に挿入されます。index が行内のセル数と等しい場合、新しいセルは行の末尾に追加されます。 |
ブラウザサポート
すべての主要ブラウザは insertCell() メソッドをサポートしています。
例
例
次の例では、テーブルの行にセルを 1 つ挿入しています：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル(example.com)</title>
<script>
function displayResult(){
var firstRow=document.getElementById("myTable").rows[0];
var x=firstRow.insertCell(-1);
x.innerHTML="New cell"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
</tr>
</table>
<br>
<button type="button" onclick="displayResult()">セルを挿入</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル(example.com)</title>
<script>
function displayResult(){
var firstRow=document.getElementById("myTable").rows[0];
var x=firstRow.insertCell(-1);
x.innerHTML="New cell"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
</tr>
</table>
<br>
<button type="button" onclick="displayResult()">セルを挿入</button>
</body>
</html>
試してみる »
その他の例
tr オブジェクトその他の拡張