簡単に表を作成・編集！a-table.jsの使い方ガイド｜DAD UNION

皆さん、表を作成する際に手間取った経験はありませんか？特に複数行・列がある表をゼロから作成するのは結構面倒ですよね。
今回は、そのような煩わしさを解消するためのプラグイン、a-table.jsをご紹介します。
このプラグインを使えば、簡単にtableタグを編集・生成することができ、時間と労力を大幅に節約できます。

Contents

a-table.jsの基本的な使い方
HTML記述例
JavaScriptの記述
a-table.jsでtable（表）タグを編集・生成するデモページ
ソース元：a-table.js
まとめ

a-table.jsの基本的な使い方

まずは、a-table.jsを使用するために必要なCSSファイル
fonts/a-table-icon.css
a-table.css
を読み込みます。その他、「/* table生成用CSS */」記述です。以下のコードをHTMLのheadタグ内に追加してください。

<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>

HTML記述例

次に、a-table.jsで生成するtableタグのHTMLコードを用意します。
デフォルトの表（class=”table”）を用意します。編集・生成したtableタグ出力先（class=”tbltag”）とマークダウン出力先（class=”markdown”）も用意します。以下のコードをHTMLのbodyタグ内に追加してください。

<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>

JavaScriptの記述

a-table.jsを使うために、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>