jQuery
bootstrap

[jQuery]テーブルを用いて追加/削除できるフロー図を作成する

完成イメージ

以下のように、要素の追加/削除可能な簡単なフロー図を作成します。
flow.gif

手順

1. テーブルの作成

テーブル、追加/全削除ボタンを作成します。Bootstrapを使用してスタイルを整えます。

index.html
    <div class="container">
        <table id="table-flow" class="table"></table>
        <button id="add" class="btn-primary">追加</button>
        <button id="clear" class="btn-danger">全削除</button>
    </div>

2. 要素の追加

追加ボタンのクリックイベンドで、コンテンツと矢印(三角)の要素を生成してテーブルに追加します。

main.js
//追加ボタンのクリックイベント
$('#add').on("click", function() {
    var items = $('#table-flow tr.item');

    //要素が存在するとき、矢印を追加する
    if (items.length != 0) {
        var div_triangle = $('<div>', {
            "class": "triangle"
        });
        var td_arrow = $('<td>').attr("colspan", "2");
        var tr_arrow = $('<tr>', {
            "class": "arrow"
        });
        td_arrow = $(td_arrow).append(div_triangle);
        tr_arrow = $(tr_arrow).append(td_arrow);
        $('#table-flow').append(tr_arrow);
    }

    //要素を追加する
    var tag = $('<h4>', {
        text: "テスト"
      });
    var p = $('<p>', {
      "class": "text-muted",
      text: "テストテストテスト"
    });
    var btn = $('<button>', {
      "class": "btn delete-btn",
      text: "×"
    });
    var td = $('<td>');
    var tr = $('<tr>');
    td = $(td).append(tag);
    td = $(td).append(p);
    tr = $(tr).append(td);
    tr = $(tr).append($('<td>').append(btn));
    $(tr).addClass("item");
    $('#table-flow').append(tr);
});

追加するコンテンツ要素

コンテンツ要素に削除ボタンを付加しています。

生成するhtml
<tr class="item">
  <td>
    <h4>テスト</h4>
    <p class="text-muted">テストテストテスト</p>
  </td>
  <td>
    <button class="btn delte-btn">x</button>
  </td>
</tr>

追加する矢印要素

生成するhtml
<tr class="arrow">
  <td colspan="2">
    <div class="triangle"></div>
  <td>
</tr>

下向き矢印(三角)は以下のcssで作成しています。

stylesheet.css
.triangle {
    margin: 0 auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 25px 0 25px;
    border-color: grey transparent transparent transparent;
}

3. 要素の削除

削除ボタンのクリックイベントで、テーブルの要素を取得して削除します。

main.js
$('#table-flow').on("click", ".delete-btn", function() {
    // テーブルの要素を取得する
    var tr = $(this).parents('tr');
    var items = $('#table-flow tr.item');
    if (items.length != 0) {
        var tr_arrow;
        // 要素の前/後の矢印を削除する
        if($(tr).next().attr("class") == "arrow") {
            tr_arrow = $(tr).next();
        } else {
            tr_arrow = $(tr).prev();
        }
        tr_arrow.remove();
    }
    // 要素を削除する
    $(tr).remove();
});

table-hover(Bootstrap)を追加する

テーブルにtable-hoverを付ける際は、下記で矢印要素のイベントを無効化します。

stylesheet.css
.arrow {
    pointer-events: none;
}

まとめ

テーブルを用いて、追加/削除可能なフロー図を作成を行いました。
これを用いて、簡単なフローを表現することが出来ます。