trObject.insertCell( index )は、表（table要素）の行（tr要素）の「index」に指定したインデックス番号の位置にセル（td要素）を挿入するメソッド。
構文
$trElementReference.insertCell( index );
- index
- セル（td要素）を挿入する位置をインデックス番号で指定。
- インデックス番号は「0」から始まる点に注意。１列目のセルのインデックス番号が「0」である。
戻り値
挿入したセル（td要素）。
例
var $insertedCell = $tableElementReference.rows[0].insertCell(0); // 表の１行目の１列目のセル（td要素）としてを挿入
$insertedCell.innerHTML = "タイトル"; // 挿入したセル（td要素）の内容を指定
var $insertedCell = $tableElementReference.rows[0].insertCell(2); // 表の１行目の３列目のセル（td要素）としてを挿入
$insertedCell.innerHTML = "タイトル"; // 挿入したセル（td要素）の内容を指定
var $insertedCell = $tableElementReference.rows[0].insertCell(2); // 表の１行目の３列目のセル（td要素）としてを挿入
サンプル
| セル１ | セル２ | セル３ |
サンプルの動作について
- 「１列目のセルとして挿入」ボタンをクリックすると、表の１行目の１列目にセルを挿入する。
- 「最後の列のセルとして挿入」ボタンをクリックすると、表の１行目の最後の列のセルとして挿入する。
- 「１列目のセルを削除」ボタンをクリックすると、表の１行目の１列目のセルを削除する。
- 「最後の列のセルを削除」ボタンをクリックすると、表の１行目の最後の列のセルを削除する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
var $sampleCount = 0;
function sampleInsertCell( $index ){
$sampleCount++;
var $sampleTable = document.getElementById( "sample" );
if( $index == "last" ){
$index = $sampleTable.rows[0].cells.length;
}
var $insertedCell = $sampleTable.rows[0].insertCell($index);
$insertedCell.innerHTML = "追加セル" + $sampleCount;
}
function sampleDeleteCell( $index ){
var $sampleTable = document.getElementById( "sample" );
if( $index == "last" ){
$index = $sampleTable.rows[0].cells.length-1;
}
$sampleTable.rows[0].deleteCell( $index );
}
</script>
var $sampleCount = 0;
function sampleInsertCell( $index ){
$sampleCount++;
var $sampleTable = document.getElementById( "sample" );
if( $index == "last" ){
$index = $sampleTable.rows[0].cells.length;
}
var $insertedCell = $sampleTable.rows[0].insertCell($index);
$insertedCell.innerHTML = "追加セル" + $sampleCount;
}
function sampleDeleteCell( $index ){
var $sampleTable = document.getElementById( "sample" );
if( $index == "last" ){
$index = $sampleTable.rows[0].cells.length-1;
}
$sampleTable.rows[0].deleteCell( $index );
}
</script>
HTML
<p>
<button onclick="sampleInsertCell( 0 )">１列目のセルとして挿入</button>
<button onclick="sampleInsertCell( 'last' )">最後の列のセルとして挿入</button>
</p>
<p>
<button onclick="sampleDeleteCell( 0 )">１列目のセルを削除</button>
<button onclick="sampleDeleteCell( 'last' )">最後の列のセルを削除</button>
</p>
<table id="sample">
<tr>
<td>セル１</td>
<td>セル２</td>
<td>セル３</td>
</tr>
</table>
<button onclick="sampleInsertCell( 0 )">１列目のセルとして挿入</button>
<button onclick="sampleInsertCell( 'last' )">最後の列のセルとして挿入</button>
</p>
<p>
<button onclick="sampleDeleteCell( 0 )">１列目のセルを削除</button>
<button onclick="sampleDeleteCell( 'last' )">最後の列のセルを削除</button>
</p>
<table id="sample">
<tr>
<td>セル１</td>
<td>セル２</td>
<td>セル３</td>
</tr>
</table>
CSS
<style>
#sample tr,
#sample td {
background-color: inherit;
}
</style>
#sample tr,
#sample td {
background-color: inherit;
}
</style>