a-table.jsを使ってtable(表)タグを編集・生成するプラグインをご紹介します。
複数行・列がある表をゼロからtableタグで作成するのって結構面倒なのでこれは使えます。
Contents
ディスプレイ広告
a-table.jsでtable(表)タグを編集・生成するCSS記述
※fonts/a-table-icon.css、a-table.cssファイルを読み込みます。その他、「/* table生成用CSS */」記述です。必要に応じて変更して下さい。
<link rel='stylesheet' href="fonts/a-table-icon.css">
<link rel="stylesheet" href="a-table.css">
<style>
body {
font-size: 16px;
}
h1{
text-align: center;
font-size: 20px;
line-height: 1.6em;
padding: 20px 0;
}
p{
text-align: center;
}
/* table生成用CSS */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.source-area {
margin-top: 10px;
padding: 5px;
width: 100%;
background-color: #cccccc;
overflow-x: scroll;
}
.main {
padding: 10px;
}
.column {
padding: 5px;
float: left;
width: 50%;
}
.acms-admin-btn-group {
display: table;
float: left;
padding: 7px 10px;
padding-left: 0;
}
.acms-admin-btn-group .acms-admin-btn {
border-radius: 0;
display: table-cell;
height: 28px;
border-right: none;
}
.acms-admin-btn-group .acms-admin-btn:first-child {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.acms-admin-btn-group .acms-admin-btn:last-child {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-right: 1px solid #333333;
}
.a-table td.red {
color: red;
}
.a-table td.blue {
color: blue;
}
.a-table td.yellow {
color: yellow;
}
</style>
a-table.jsでtable(表)タグを編集・生成するHTML記述
※デフォルトの表(class=”table”)を用意します。編集・生成したtableタグ出力先(class=”tbltag”)とマークダウン出力先(class=”markdown”)も用意します。必要に応じて変更して下さい。
<h1>a-table.jsでtable(表)タグを編集・生成</h1>
<p>以下のtable(表)を編集してみて下さい。</p>
<div class="main acms-admin-form">
<div class="acms-admin-table-container">
<div class="acms-admin-table-wrap">
<div class="acms-admin-table-inner">
<table class="table">
<tr>
<td class="center">テスト</td>
<td class="blue">ダミーテキスト</td>
<td class="right">テスト</td>
<td>ダミーテキスト</td>
<td>テスト</td>
</tr>
<tr>
<td>テスト</td>
<td>ダミーテキスト</td>
<td>テスト</td>
<td>ダミーテキスト</td>
<td>テスト</td>
</tr>
<tr>
<td>テスト</td>
<td>ダミーテキスト</td>
<td>テスト</td>
<td>ダミーテキスト</td>
<td>テスト</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>テスト</td>
<td>ダミーテキスト</td>
<td>テスト</td>
<td>ダミーテキスト</td>
<td>テスト</td>
</tr>
<tr>
<td>テスト</td>
<td>ダミーテキスト</td>
<td>テスト</td>
<td>ダミーテキスト</td>
<td>テスト</td>
</tr>
</table>
</div>
</div>
</div>
<div class="column">
<p>HTML</p>
<div class="source-area">
<div class="tbltag"></div>
</div>
</div>
<div class="column">
<p>マークダウン</p>
<div class="source-area">
<div class="markdown"></div>
</div>
</div>
</div>
a-table.jsでtable(表)タグを編集・生成するJavaScriptの記述
※a-table.jsファイルを読み込みます。new aTable(‘編集するテーブル’,{オプション})を記述します。オプションには独自のセルの色変えや書式等を追加・設定出来ます。
<script src="a-table.js"></script>
<script>
var table = new aTable('.table',{
lang:'ja',
mark:{
icon: {
td:false,
th:false
}
},
selector:{
option:[
{label:'赤',value:'red'},
{label:'青',value:'blue'},
{label:'黄色',value:'yellow'}
]
},
tableOption: [
{label:'赤',value:'red'},
{label:'青',value:'blue'},
{label:'黄色',value:'yellow'}
]
});
table.afterRendered =
table.afterEntered = function(){
document.querySelector('.tbltag').innerText = this.getTable();
document.querySelector('.markdown').innerText = this.getMarkdown();
}
table.afterRendered();
</script>
a-table.jsでtable(表)タグを編集・生成するデモページ
a-table.jsでtable(表)タグを編集・生成するデモページ
ソース元:a-table.js
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。