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