tableObject.deleteTFoot()は、表(table要素)のフッタ(tfoot要素)を削除するメソッド。
構文
$tableElementReference.deleteTFoot();
戻り値
なし。
例
$tableElementReference.deleteTFoot(); // 表のフッタ(tfoot要素)を削除
サンプル
1行目1列目 | 1行目2列目 | 1行目3列目 |
2行目1列目 | 2行目2列目 | 2行目3列目 |
3行目1列目 | 3行目2列目 | 3行目3列目 |
サンプルの動作について
- 「作成」ボタンをクリックすると、表のフッタ(tfoot要素)を作成する。既にフッタがある場合は、フッタに新たな行を追加する。
- 「削除」ボタンをクリックすると、表のフッタ(tfoot要素)を削除する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
var $sampleCount = 0;
function sampleCreateTFoot(){
$sampleCount++;
var $sampleTable = document.getElementById( "sample" );
var $createdTFoot = $sampleTable.createTFoot();
var $insertRow = $createdTFoot.insertRow(0);
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列目のセル";
}
function sampleDeleteTFoot(){
var $sampleTable = document.getElementById( "sample" );
$sampleTable.deleteTFoot();
}
</script>
var $sampleCount = 0;
function sampleCreateTFoot(){
$sampleCount++;
var $sampleTable = document.getElementById( "sample" );
var $createdTFoot = $sampleTable.createTFoot();
var $insertRow = $createdTFoot.insertRow(0);
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列目のセル";
}
function sampleDeleteTFoot(){
var $sampleTable = document.getElementById( "sample" );
$sampleTable.deleteTFoot();
}
</script>
HTML
<p>
<button onclick="sampleCreateTFoot()">作成</button>
<button onclick="sampleDeleteTFoot()">削除</button>
</p>
<table id="sample">
<tr>
<td>1行目1列目</td>
<td>1行目2列目</td>
<td>1行目3列目</td>
</tr>
<tr>
<td>2行目1列目</td>
<td>2行目2列目</td>
<td>2行目3列目</td>
</tr>
<tr>
<td>3行目1列目</td>
<td>3行目2列目</td>
<td>3行目3列目</td>
</tr>
</table>
<button onclick="sampleCreateTFoot()">作成</button>
<button onclick="sampleDeleteTFoot()">削除</button>
</p>
<table id="sample">
<tr>
<td>1行目1列目</td>
<td>1行目2列目</td>
<td>1行目3列目</td>
</tr>
<tr>
<td>2行目1列目</td>
<td>2行目2列目</td>
<td>2行目3列目</td>
</tr>
<tr>
<td>3行目1列目</td>
<td>3行目2列目</td>
<td>3行目3列目</td>
</tr>
</table>
CSS
<style>
#sample tr,
#sample td {
background-color: inherit;
}
</style>
#sample tr,
#sample td {
background-color: inherit;
}
</style>