tableObject.deleteRow( index )は、表（table要素）から「index」に指定したインデックス番号の行（tr要素）を削除するメソッド。
構文
$tableElementReference.deleteRow( index );
- index
- 行（tr要素）を削除する位置をインデックス番号で指定。
- インデックス番号は「0」から始まる点に注意。１行目のインデックス番号が「0」である。
戻り値
なし。
例
$tableElementReference.deleteRow(0); // 表の１行目の行（tr要素）を削除
$tableElementReference.deleteRow(2); // 表の３行目の行（tr要素）を削除
$tableElementReference.deleteRow(2); // 表の３行目の行（tr要素）を削除
サンプル
| １行目１列目 | １行目２列目 | １行目３列目 |
| ２行目１列目 | ２行目２列目 | ２行目３列目 |
| ３行目１列目 | ３行目２列目 | ３行目３列目 |
| ４行目１列目 | ４行目２列目 | ４行目３列目 |
| ５行目１列目 | ５行目２列目 | ５行目３列目 |
サンプルの動作について
- 「１行目を削除」ボタンをクリックすると、表の１行目の行を削除する。
- 「最後の行を削除」ボタンをクリックすると、表の最後の行を削除する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function sampleDeleteRow( $index ){
var $sampleTable = document.getElementById( "sample" );
if( $index == "last" ){
$index = $sampleTable.rows.length-1;
}
$sampleTable.deleteRow($index);
}
</script>
function sampleDeleteRow( $index ){
var $sampleTable = document.getElementById( "sample" );
if( $index == "last" ){
$index = $sampleTable.rows.length-1;
}
$sampleTable.deleteRow($index);
}
</script>
HTML
<p>
<button onclick="sampleDeleteRow( 0 )">１行目を削除</button>
<button onclick="sampleDeleteRow( '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>
<tr>
<td>４行目１列目</td>
<td>４行目２列目</td>
<td>４行目３列目</td>
</tr>
<tr>
<td>５行目１列目</td>
<td>５行目２列目</td>
<td>５行目３列目</td>
</tr>
</table>
<button onclick="sampleDeleteRow( 0 )">１行目を削除</button>
<button onclick="sampleDeleteRow( '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>
<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;
}
#sample tr,
#sample td {
background-color: inherit;
}
</style>
#sampleCaption {
font-size: inherit;
margin: 0px;
padding: 3px;
background-color: lightblue;
}
#sample tr,
#sample td {
background-color: inherit;
}
</style>