WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順)

<template> 「テンプレート」[読み方:テンプレート]

<template>タグは、複製され、javascriptによって文書に挿入することが可能なHTMLの断片を宣言します。

HTML規格HTML4.01HTML5
使用可否×
<template>は、HTML5で追加されたタグです
ブラウザ別の対応状況
下記サイトで確認できます。
「Can I use」(英語のサイトです)
広告

<template> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
フローコンテンツ
フレージングコンテンツ
メタデータコンテンツ
フローコンテンツ、エンベディッドコンテンツを子要素にもてる場所
span属性指定無の<colgroup>
フローコンテンツ
エンベディッドコンテンツ
不可

<template> の属性

【構文】
<template id="id">~</template>
属性意味値のサンプルなど
---
グローバル属性
  • accesskey
  • autocapitalize
  • autofocus
  • class
  • contenteditable
  • dir
  • draggable
  • enterkeyhint
  • hidden
  • id
  • inert
  • inputmode
  • is
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • nonce
  • popover
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate
  • writingsuggestions
イベント属性
ページTOP

<template>タグのサンプル

ボタン押下で行を追加・削除するサンプル
<script>
var wNo = 1;
// 行の追加
function rowAdd() {
// template取得
var objTemplate = document.querySelector('#t1');

// template内のSPANをカウントUP
wNo = wNo + 1;
var objSpan = objTemplate.content.querySelector('#s1');
objSpan.textContent = wNo;

// templateのDIVにIDを付ける
var objDiv = objTemplate.content.querySelector('.c1'); //classで項目を特定しIDを付ける
objDiv.setAttribute("id", "elRow" + wNo);

// templateを追加
document.querySelector('#d1').appendChild(document.importNode(objTemplate.content, true));
}
// 行の削除
function rowDel() {
if(wNo <=1){retrun;}

var objOya = document.getElementById("d1");
var objKo = document.getElementById("elRow" + wNo);

objOya.removeChild(objKo);

wNo = wNo - 1;
}
</script>

<table id="css-s1">
<tr>
<th>NO</th>
<th>商品番号</th>
<th>商品名</th>
<th>色</th>
<th>サイズ</th>
<th>個数</th>
</tr>
<tr>
<td width="15">1</td>
<td><input type="text" name="ENTRY_1" size="15"></td>
<td><input type="text" name="ENTRY_2" size="25"></td>
<td><input type="text" name="ENTRY_3" size="5"></td>
<td><input type="text" name="ENTRY_4" size="5"></td>
<td><input type="text" name="ENTRY_5" size="5"></td>
</tr>
</table>

<template id="t1">
<div class="c1">
<table id="css-s1">
<tr>
<td width="15"><span id="s1">0</span></td>
<td><input type="text" name="ENTRY_1" size="15"></td>
<td><input type="text" name="ENTRY_2" size="25"></td>
<td><input type="text" name="ENTRY_3" size="5"></td>
<td><input type="text" name="ENTRY_4" size="5"></td>
<td><input type="text" name="ENTRY_5" size="5"></td>
</tr>
</table>
</div>
</template>
<div id="d1"></div>
<br>
<div>
<input type="button" value="商品追加" onclick="rowAdd();">
<input type="button" value="商品削除" onclick="rowDel();">
</div>
NO 商品番号 商品名 サイズ 個数
1


ボタンにより表示内容を切り替えるサンプル
<button onclick="change(1)">1月分</button>
<button onclick="change(2)">2月分</button>

</div>
<br>

<table id="css-s1">
<thead>
<tr>
<th>月</th>
<th>名前</th>
<th>出身地</th>
<th>性別</th>
<th>年齢</th>
</tr>
</thead>
<tbody id="oya">
<template id="row">
<tr id="ko">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</template>
</tbody>
</table>

<script>
// 1月分データ
var data = [
{ 月: '1月', 名前: '日本太郎', 出身地: '東京都', 性別: '男性', 年齢: 30 },
{ 月: '1月', 名前: '日本次郎', 出身地: '長野県', 性別: '男性', 年齢: 28 },
{ 月: '1月', 名前: '日本三郎', 出身地: '大阪府', 性別: '男性', 年齢: 24 },
{ 月: '1月', 名前: '日本花子', 出身地: '鹿児島県', 性別: '女性', 年齢: 31 },
{ 月: '1月', 名前: '日本富子', 出身地: '北海道', 性別: '女性', 年齢: 21 }
];
// 2月分データ
var data2 = [
{ 月: '2月', 名前: 'にほんたろう', 出身地: 'おおさかふ', 性別: 'おとこ', 年齢: 50 },
{ 月: '2月', 名前: 'にほんじろう', 出身地: 'かごしまけん', 性別: 'おとこ', 年齢: 48 },
{ 月: '2月', 名前: 'にほんとみこ', 出身地: 'ながのけん', 性別: 'おんな', 年齢: 61 }
];
</script>

<script>
function change(no){

var objoya=document.getElementById("oya");

//"tr"の数で行数を取得
var trcnt=objoya.getElementsByTagName("tr");
var num=trcnt.length;

//行数回繰り返し、行単位に順にすべて削除
for(var i =num-1;i>=0; i--){
var objko=document.getElementById("ko");
objoya.removeChild(objko);
}
// template取得
var objtemplate = document.querySelector('#row');
var cat;

for (var i = 0; i < data.length; i += 1) {
if(no==1){
cat = data[i];

}else{
cat = data2[i];
}

var clone = objtemplate.content.cloneNode(true);
var cells = clone.querySelectorAll('td');
cells[0].textContent = cat.月;
cells[1].textContent = cat.名前;
cells[2].textContent = cat.出身地;
cells[3].textContent = cat.性別;
cells[4].textContent = cat.年齢;
objtemplate.parentNode.appendChild(clone);
}
}
</script>

名前 出身地 性別 年齢
ページTOP

留意事項

  • <template>タグは、ネストしての指定はできません。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン