Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

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

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

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

ブックマークレット

ブックマークレット
javascript:(function(){!function(d,f,s){s=d.createElement("script");s.src="//j.mp/1bPoAXq";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="//j.mp/1bPoAXq";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 で作っています 1 。HTML でテーブル定義書を作成すると、例えば LauncyQuicksilver のようなもので必要なテーブルのみ素早く参照できるため非常に便利です。

しかしながら 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 を使ってドキュメントを作っています。 

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした