tableObject.createTHead()メソッド

tableObject.createTHead()は、表(table要素)のヘッダ(thead要素)を作成するメソッド。

構文

$tableElementReference.createTHead();

戻り値

作成したヘッダ(thead要素)、もしくは、既存のヘッダ(thead要素)。

var $createdTHead = $tableElementReference.createTHead(); // 表のヘッダ(thead要素)を作成
var $insertRow = $createdTHead.insertRow(0); // 作成したヘッダ(thead要素)に行(tr要素)を挿入
var $insertCell1 = $insertRow.insertCell(0); // 作成したヘッダ(thead要素)の行(tr要素)に1列目のセル(td要素)を挿入
$insertCell1.innerHTML = "ヘッダの1列目のセル"; // 作成したヘッダ(thead要素)の行(tr要素)の1列目のセル(td要素)の内容を指定

サンプル

1行目1列目 1行目2列目 1行目3列目
2行目1列目 2行目2列目 2行目3列目
3行目1列目 3行目2列目 3行目3列目

サンプルの動作について

  • 「作成」ボタンをクリックすると、表のヘッダ(thead要素)を作成する。既にヘッダがある場合は、ヘッダに新たな行を追加する。
  • 「削除」ボタンをクリックすると、表のヘッダ(thead要素)を削除する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
var $sampleCount = 0;
function sampleCreateTHead(){
    $sampleCount++;
    var $sampleTable = document.getElementById( "sample" );
    var $createdTHead = $sampleTable.createTHead();
    var $insertRow = $createdTHead.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 sampleDeleteTHead(){
    var $sampleTable = document.getElementById( "sample" );
    var $deletedCaption = $sampleTable.deleteTHead();
}
</script>

HTML

<p>
    <button onclick="sampleCreateTHead()">作成</button>
    <button onclick="sampleDeleteTHead()">削除</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>

スポンサード リンク

カテゴリー: DOM, JavaScript, Tableオブジェクト, リファレンス パーマリンク