tableの任意のtdから内容をクリップボードに取得するブックマークレット

<table>タグで構成された表ってありますよね。
あの表に入ってるデータをExcelにコピペしたい時があるんですけど、コピペすると変な空白とかが入ってきて鬱陶しいんですよね・・・

それに、表のデータ全部じゃなくて、一行目と三行目と五行目・・・みたいな感じで欲しいデータだけ取りたい時とか、全部コピペした後にわざわざ不要なデータを除去するのがめんどくさい・・・


というか、もはやテーブルを選択すること自体が面倒。


・・・というワケで、<table>タグで作られた表から任意の<td>タグ(セル)の内容を、クリップボードに取得するブックマークレットを作りました。



↑の内容をコピーして、ブックマークレットとして登録してください。

ちなみにIE用。
クリップボードの処理を格ブラウザ用に変えてあげれば使えないことも無いと思います。

なお、ブックマークレットの作り方はブラウザによって違いますので、ご自分でお調べください。


<td>タグの中身を取得して、ペーストの際はカンマ区切りで出力します。
Excelのシートに貼り付ける時なんかに便利です。


コードの解説ですが、ページから<table>タグを探し出して、そこから<td>タグの中身をクリップボードに取得します。IDやクラス名ではなく<table>タグが対象ですので、表にIDやクラス名が付けられていなくても問題はありません。

拡張性やメンテナンス性を考えれば、振ってあったほうが便利だとは思うんですけどね・・・


つまり、<table>タグ全てが対象になるということです。
<table>タグをバリバリ使ってレイアウトを整えている昔のWebページ(偏見)なんかでは使いづらいかもしれませんね。


同ページ内に<table>タグがいくつも存在する場合は、

table=document.getElementsByTagName("table")[0]

上記の[0]の値を変えてやってください。
ページのソースを確認して、一番最初にある<table>タグが[0]となります。
2番目なら[1]、3番目なら[2]・・・といった具合に変更してみましょう。


お次に任意の<td>タグを決める処理ですが、

r=[0,1],c=[2,3]

r=[] 内の数値が行を、c=[] 内の数値が列をそれぞれ表しています。
サンプルの数値では最初に上から1行目、左から2列目の<td>タグの内容を取得し、
次に上から3行目、左から4列目の<td>タグの内容を取得します。


0,0 0,1 0,2 0,3
1,0 1,1 1,2 1,3
2,0 2,1 2,2 2,3
3,0 3,1 3,2 3,3

上は<table>タグで構成された表です。
桃色の<td>タグ(上から2行目、左から3列目)と黄色の<td>タグ(上から4行目、左から2列目)を、桃→黄の順に中身を取り出す時は、r=[1,3],c=[2,1] のように記述してください。



最後に、取得した内容はカンマ区切りで出力しますが、

text.join(',')

上記の『,』(カンマ)を変えることで、区切りの記号を任意に変更することができます。



なお、<td>タグにIDが振ってある場合は、下記のこちらをご使用ください。

取得したい<td>タグのIDを

array=["td1","td2","td3"]

array=[]の中に入れればOKです。


ソフトやアドオンを使えない環境でも、少しでも楽しちゃいましょう!



とはいえ・・・このブックマークレット、ひとつ注意することがございまして・・・

上でご紹介したブックマークレットでは、iframeの中で構成されたテーブルには使用できません。
なので、コピペしたい<td>タグがiflame内にある場合は、下記のソースをご使用ください。


<td>タグにIDが振っていない場合・・・



<td>タグにIDが振ってある場合・・・



要は、iframeの中のテーブルもとい要素にアクセスする為のコード

document.getElementsByName("Body")[0].contentWindow.

を、「document.getElementBy~」の前に記述すればOKです。


如何でしょうか?
自分で作っておいてナンですが、スゲェ役に立ってますよ。
なんたって、ボタン1つでクリップボードにコピーされるもん。超便利。

もしこれが皆様のお役にも立てたのであれば幸いです。