HTML 表の「特定の列」だけをコピーしたい（Bookmarklet 版）

はじめに

HTML 表の特定の列だけをコピーしたいという要件は少なくありません（しかし多くもないかもしれません）。

調べると以下のような方法があります。

• Excel や Word にコピペしてから
• Firefox の機能拡張を使う
• Chrome の機能拡張を使う

しかしもっと手軽にやりたいので Bookmarklet を作成しました。

ブックマークレット

ブックマークレット

javascript:(function(){!function(d,f,s){s=d.createElement("script");s.src="https://code.jquery.com/jquery-1.12.4.min.js";s.onload=function(){f(jQuery.noConflict(1))};d.body.appendChild(s)}(document,function($){var r = "";var s=document.getSelection();if (!s) {alert("Please select strings.");return;}var c=-1;c=$(s.focusNode).closest("td").index();if (c<0) {c=$(s.focusNode).closest("th").index();}if (c<0) {alert("Please select strings in some table.");return;}var o=$(s.focusNode.parentNode).closest("table");o.find("tr").each(function () {var t = $(this).find("td:eq("+c+")").text().trim();if (t=='') {t = $(this).find("th:eq("+c+")").text().trim();}r+=t+"<br/>";});if (r=="") {return;}var w=window.open("");var d=w.document.open();d.write(r);d.close();});})();

すこし見やすく

!function(d,f,s){s=d.createElement("script");s.src="https://code.jquery.com/jquery-1.12.4.min.js";s.onload=function(){f(jQuery.noConflict(1))};d.body.appendChild(s)}(document,function($){
    var r = "";
    var s=document.getSelection();
    if (!s) {
        alert("Please select strings.");return;
    }
    var c=-1;
    c=$(s.focusNode).closest("td").index();
    if (c<0) {
        c=$(s.focusNode).closest("th").index();
    }
    if (c<0) {
        alert("Please select strings in some table.");return;
    }
    var o=$(s.focusNode.parentNode).closest("table");
    o.find("tr").each(function () {
        var t = $(this).find("td:eq("+c+")").text().trim();
        if (t=='') {
            t = $(this).find("th:eq("+c+")").text().trim();
        }
        r+=t+"<br/>";
    });
    if (r=="") {return;}
    var w=window.open("");
    var d=w.document.open();
    d.write(r);
    d.close();
});

お世話になります

以下の記事のコードを使わせていただいています。たいへんお世話になります。

ブックマークレットで jQuery を使う魔法の 210 文字 - Qiita

以下のサービスを使わせていただきました。お世話になります。

WDF - Software : ブックマークレット作成スクリプト

説明

多くの現場では Excel のワークシートでテーブル定義書を作って管理しているのではないでしょうか。

私はテーブル定義書を HTML で作っています ¹ 。HTML でテーブル定義書を作成すると、例えば Launcy や Quicksilver のようなもので必要なテーブルのみ素早く参照できるため非常に便利です。

しかしながら Excel と異なり、HTML の表では特定の列だけをコピペできません。多くのカラムを持つテーブルから SQL 文を作成するとき、コピペして楽したいと思っても思うようにいきません。

そのような不便を解決するために、このブックマークレットを作成しました。

このようなテーブル定義から

No	論理名	物理名	型	Null可否
1	社員番号	employee_id	Number
2	氏名	employee_name	Varchar2
3	生年月日	birth_day	Date
4	部署	section_id	Number
5	メールアドレス	email_address	Varchar2

このテーブルには三列目にお目当ての「カラムの物理名」が入っています。

テーブル内のいずれかの文字列を選択して実行

ブラウザ上で テーブルの中の文字列を選択して Bookmarklet を実行 すると、その列の文字列を取得して表示します。

あとは好みのテキストエディタにコピペすれば若干楽ができます。

列の指定

選択した文字列の存在する列を取得しています。文字列を取得せず、クリックするだけでいいかもしれません。

動作確認

IE と Firefox と Vivaldi で動作確認しました。

変更

初出時、列の指定をハードコーディングしていましたが、選択文字列から取得するように変更しました。

1. 正確には Sphinx を使ってドキュメントを作っています。 ↩