セルをクリックして文字列をコピーする方法
- テーブルのセルをクリックすると、指定された文章をクリップボードにコピーする方法を教えてください。
- Javascriptを使用して、セルをクリックして文字列をコピーする方法を記述したいです。
- 現在CSSでは、セルをクリックして文字列をコピーするための設定ができていません。どのように記述すればいいか教えてください。
- ベストアンサー
セルをクリックして文字列をコピーしたい
テーブルのセルをクリックすると、指定された文章をクリップボードにコピーするようにしたいです。 <table> _<tr> __<td class="time">12:00</td> __<td class="name"><a href="hoge">suzuki</a></td> _</tr> </table> 上の例では、12:00のセルをクリックすると、「あいうえお」という文字列をクリップボードにコピーするような感じです。 現在CSSでは td a{ display:block; width:100%; height:100%; text-decoration: none; } と設定しています。 どうやらJavascriptを使えばできるようなのですが、Javascript事態全く使ったことがないのでどう記述すればいいかがわかりませんでした。 調べてみたところ、inputタグにonclick="clipboardData.setData('text',this.value)"と入力すればできると聞きました。ですが、これはinputタグなのでこれはフォームのボタンをクリックした場合にコピーするような内容ですよね。 そうではなく、リンク先をクリックするようなのと同じような感じでセルをクリックすると、文字列をコピーできるような方法が知りたいのです。 できれば記述の方法も教えていただければ助かります。 どなたかご教示のほど、どうかよろしくお願いします。
- spinia0120
- お礼率69% (152/219)
- JavaScript
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 具体例ありがとうございました。 以下のソースで実現できたと思います。 <html> <head> <title>セルをクリックして文字列をコピーしたい</title> <style type="text/css"> table { border: solid 1px #999; border-collapse: collapse; } td { border: solid 1px #999; } td a { display: block; width: 100%; height: 100%; text-decoration: none; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $().ready ( function() { // class="time"に隣接するaタグのクリックイベントに処理を設定 $('.time a').click ( function() { // aタグのhrefから値を取得してmailto:以降をコピー clipboardData.setData ( 'text', $(this).attr('href').substr(7) ); // 実際の動作の取消 return false; }); }); </script> </head> <body> <table> <tr> <td class="time"><a href="mailto:a@a">12:00</a></td> <td class="name"><a href="#">あいうえお</a></td> <td class="time"><a href="mailto:b@b">12:30</a></td> <td class="name"><a href="#">かきくけこ</a></td> </tr> <tr> <td class="time"><a href="mailto:c@c">16:00</a></td> <td class="name"><a href="#">さしすせそ</a></td> <td class="time"><a href="mailto:d@d">16:30</a></td> <td class="name"><a href="#">たちつてと</a></td> </tr> <tr> <td class="time"><a href="mailto:e@e">21:00</a></td> <td class="name"><a href="#">なにぬねの</a></td> <td class="time"><a href="mailto:f@f">21:30</a></td> <td class="name"><a href="#">はひふへほ</a></td> </tr> </table> 貼り付けテスト用 <br> <textarea cols="50" rows="5"></textarea> </body> </html>
その他の回答 (3)
- ibara994
- ベストアンサー率75% (9/12)
<a href="javascript:clipboardData.setData('text', 'mail@suzuki.jp');">12:00</a> ↑こんな風です でも、clipboardDataを使った方法はIEでしか機能しませんよ 他のブラウザは、クリップボードを操作させないようにしてるので、簡単には出来ません http://nplll.com/archives/2009/03/iefirefoxsafarioperaflash_ver1_1.php ここに紹介されてるZeroClipboardは、javascriptからFlash経由で操作してるそうです
お礼
ご回答ありがとうございます。 なるほどです。セキュリティーの問題で無理だったのですか。 ご回答いただいた皆さん、どうもありがとうございました。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 時間をクリックするとメールアドレスをコピーするとのことですがメールアドレスはどこに持っているんですか？ どのようにタグが組まれていて、どのようにしたいかが上手く読み取れません。 12:00 suzuki と表示されていて 12:00をクリックしたらメールアドレスをクリップボードへ。 suzukiは通常のリンク なのでしょうか。 この場合、どこかにメールアドレスを持っておかないといけませんが、画面上に表示されているのでしょうか。 例えば 12;00 mailaddress suzuki とか。
お礼
ご回答ありがとうございます ＞どのようにタグが組まれていて、どのようにしたいかが上手く読み取れません。 申し訳ありません。質問するにあたり、いろいろ削ったのが裏目に出たようです。 <table> _<tr> __<td class="time"><a href="mailto:mail@suzuki.jp">12:00</td> __<td class="name"><a href="http://foo.jp/suzuki/">suzuki</a></td> _</tr> </table> こういう風になっています。これでは、時間をクリックするとmail@suzuki.jpを宛先にメールソフトが起動してしまいます。 td.timeのa hrefの部分にある文字列（この場合はメールアドレス）をそのままクリップボードにコピーするように、上のコードを改編したいのです。 よろしくお願いします。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 JQueryというものを併用すると比較的簡単に実装できます。 >上の例では、12:00のセルをクリックすると、「あいうえお」という文字列をクリップボードにコピーするような感じです。 「あいうえお」が無いので「suzuki」の間違いだとは思いますがいかがでしょうか。 その前提でサンプルソースです。 IE以外で動作させたい場合は以下のURLを参考にしてください。 http://phpspot.org/blog/archives/2010/06/jqueryclipboard.html ==== sample.html <html> <head> <title>セルをクリックして文字列をコピーしたい</title> <style type="text/css"> table { border:solid 1px #999; border-collapse:collapse; } td { border:solid 1px #999; } td a { display:block; width:100%; height:100%; text-decoration:none; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $().ready ( function() { // class="time"のクリックイベントに処理を設定 $('.time').click ( function() { // 隣接するテキストを取得しクリップボードにセット clipboardData.setData ( 'text', $(this).next().text() ); }); }); </script> </head> <body> <table> <tr> <td class="time">12:00</td> <td class="name"><a href="#">あいうえお</a></td> <td class="time">12:30</td> <td class="name"><a href="#">かきくけこ</a></td> </tr> <tr> <td class="time">16:00</td> <td class="name"><a href="#">さしすせそ</a></td> <td class="time">16:30</td> <td class="name"><a href="#">たちつてと</a></td> </tr> <tr> <td class="time">21:00</td> <td class="name"><a href="#">なにぬねの</a></td> <td class="time">21:30</td> <td class="name"><a href="#">はひふへほ</a></td> </tr> </table> 貼り付けテスト用<br> <textarea cols="50" rows="5"></textarea> </body> </html>
お礼
ご回答ありがとうございます！ ごめんなさい。説明不十分でした 作成している練習用のhtmlからコピーしたのでsuzukiの文字列は関係なく、「時間」をクリックしたときに指定したテキストをコピーできるような方法が知りたいのです。 現在練習しているページは、 ・「時間」のセルをクリックするとその人への連絡用メールアドレスがクリップボードへコピーされる （mailtoでメーラーを起動させるのではなく、クリップボードヘコピーする） ・「人の名前（suzukiとか）」のセルをクリックするとサイト内のその人の紹介ページへリンクする という機能を持っています。 「人の名前」の方はできたのですが、「時間」の方ができませんでした。 <td class="time">のセルをクリックすると、そのセルに関するtext（この場合はメールアドレスの文字列）をコピーするようなjavascriptがあればできるかな、と考えました。 どうかよろしくお願いします。
関連するQ&A
- クリックされた罫表セルの行番号、列番号を取得するには
クリックされた罫表セルの行番号、列番号を取得する事は出来るのでしょうか。 例えば 下記Tableの"き"という文字が入ったセルをクリックすると 列番号:2 行番号:3 という番号を取得したいのです。 <table> <thead><tr><th>１</th><th>２</th><th>３</th><th>４</th></tr></thead> <tbody> <tr td>あ</td><td>い</td><td>う</td><td>え</td></tr> <tr><td>お</td><td>か</td><td>き</td><td>く</td></tr> <tr><td>け</td><td>こ</td><td>さ</td><td>し</td></tr> <tr><td>す</td><td>せ</td><td>そ</td><td>な</td></tr> </tbody> </table> onclickでidのついた所をクリックした時のアクションは取得できましたが、Csvなどからデータを取得したtableのセルをクリックした時の 列数、行数を取得する事は可能でしょうか。 宜しくお願いします。
- ベストアンサー
- JavaScript
- テーブルのセルのクリック時、セル内の文字を太くするには
テーブルのセルをクリックした際に、セルの中に入っている文字を太字にする方法が分からず困っています。 ちょっと複雑なテーブル構造になっているのですが、具体的には、以下のような仕様で作成しています。 div要素上でクリックしたら、特定のセルの文字（この場合、id='text1'のセル）の文字を太字にしたいのです。 なお、OnClick時の処理は、外部JavaScriptで行います。 <table> <tr> <td> <div id='div1' textid='text1' onclick="ChgText(event,this)"> <table width='100%'> <tr> <td width='10%'>あああ</td> <td id='text1'>いいい</td> </tr> </table> </div> </td> <tr> </table> イベント元であるdiv要素と、処理対象のTDを関係付けるために、div要素内に「textid='text1'」定義し、外部JavaScriptでは、document.getElementByIdで処理対象を特定し、最終的には、文字を太くしたいと考えています。 外部JavaScriptの概要は以下の通りです。 function ChgText(ev,item){ var text_item = null; text_item = item.tdtext_id; var chgText = document.getElementById(text_item ); chgText.style.font-weight = bold; } 上記の内容で実行しても、文字の太さは変わりませんでした。 フォントの指定の仕方がまちがっているのでしょうか？ それとも、そもそも、div要素より後に定義されるTDタグのIDをdiv要素自身が認識しないのでしょうか？ 根本的な考え方が間違っているかもしれないので、よきアドバイスをいただけるとありがたいです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- Excelでセル内の文字列のみをコピーする方法
Excelでセル内の文字列のみをクリップボードにコピーする方法を教えてください。 ※クリップボードにコピーをする方法であり、他のセルに値のみをペーストする方法ではありません。 満たしたい点は2つです。 ・表示している文字列のみを取得 ・複数のセルを同時にコピー 一つのセルに以下の文字列が入っていた場合(#以外) #123 #"abc" コピーするとクリップボードを文字列として取得すると以下の文字列が得られます #"123 #""abc""" これを以下の文字列が得られるようにしたいのです。 #123 #"abc" 1つのセルだけでいい場合は、セルを編集状態にしてコピーしたり アクティブセルの数式バーをコピーすればいいのですが、 これは当然、複数のセルを同時に選択する場合には使えません。 VBAを使う方法でもそうでなくてもかまいません。 (VBAの場合はコードもお願いしたいです) よろしくお願いします。
- ベストアンサー
- その他MS Office製品
- JavaScriptで特定のtdタグにclass名をつけたい
指定のdiv内にある一行目（もしくは、最初の3つ）のtdタグに対して JavaScriptでClass名を付けたいのですが、どのようにすればよいでしょうか？ 【HTML参考】 <div id="box"> <table> <tr> <td>セル１</td> <td>セル２</td> <td>セル３</td> </tr> <tr> <td>セル４</td> <td>セル５</td> <td>セル６</td> </tr> </table> </div> 上記のような時、div#box内の「セル１～３」に対してclass名を付けたいと言った場合です。 よろしくお願いいたします。
- 締切済み
- JavaScript
- どのセルをクリックされたのか
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa テーブルのどのセルをクリックされたかを得る方法を教えてください。 例えば36をクリックされたら(1,1)という値が得られるfunc()です。 getElementedByIdを使わない方法を教えてください。 <td>の1つ1つにonClickを書けばやりたいことはできますが HTMLファイルのサイズを小さくするために別の方法を考えています。 <table border=1 onClick=func()> <tr><td>15<td>18 <tr><td>52<td>36 </table> <script> function func(c){ alert() } </script>
- 締切済み
- JavaScript
- 特定の文字列を挿入
テーブルのセルに特定の文字列を挿入する方法は御座いませんか？ 例えば、 ＨＴＭＬファイル <html> <head> </head> <body> <table> <tr><td> (1) </td><td> (2) </td></tr> <tr><td> (3) </td><td> (4) </td></tr> </table> </body> </html> とあった場合 JavaScriptファルには (1)に挿入する内容 (2)に挿入する内容 (3)に挿入する内容 (4)に挿入する内容 を書いてHTMLファイルに書き出しをしたいのです。 document.write('');を使って書き出す方法は知っていますが、指定した場所に貼り付けたい場合複数ファイルが必要になりますよね？ それでは不便なので、JavaScriptファルは外部化で１つのファイルにし、指定箇所に文字列を挿入する方法を教えてください。 printを使えばいいんでしょうか？
- ベストアンサー
- JavaScript
- JQueryでクリックされた文字を取得したい
テーブルがあり、連番が 1 2 3 と振ってあります。 その文字情報をJQueryで取得するにはどのように記述すれば良いのでしょうか？ 例）1をクリック → 1 を取得。 <table border="1" width="150"> <tbody> <tr> <td width="50"><a href="#">1</a></td> <td>田中</td> </tr> <tr> <td><a href="#">2</a></td> <td>佐藤</td> </tr> <tr> <td><a href="#">3</a></td> <td>鈴木</td> </tr> </tbody> </table> ご存知の方教えて下さい。
- ベストアンサー
- JavaScript
- 特定の文字列を取り出したい
秀丸エディタの正規表現などを使えば可能だと思うのですが、 あるファイルに以下のような記述があったとして <table><tr> <td>abc1@abc.jp</td> <td>abc2@abc.jp</td> <td>abc3@abc.jp</td> <td>abc4@abc.jp</td> </tr></table> タグの中身の文字列だけを取り出して abc1@abc.jp abc2@abc.jp abc3@abc.jp abc4@abc.jp というテキストを作りたいのですが、 何か良い方法はありますでしょうか？
- 締切済み
- その他(ソフトウェア)
- セル内の文字が中央に・・・
タグでホームページを作っているのですが 表の中の文字が中央に表示されます <table border="1"> <tr><td rowspan="3">あ</td><td>あ</td></tr> <tr><td>あ</td></tr> <tr><td>あ</td></tr> </table> ↑このようなタグを使ってますが 左の「あ」が中央に行ってしまいます 普通通りに上から表示するタグありましたら教えてください？
- 締切済み
- その他([技術者向] コンピューター)
- クリックするとテーブルの列の背景色が変わる／元に戻る
このサイトを参考に以下のサンプルを作りました。 「あるセルをクリックすると、そのセルと依存関係のあるセルすべての背景色を変更する。」 この例でいくと、 1.セルA1,A2のどれをクリックしても、列Aすべての色が変わる。 2.セルB1,B2のいずれかをクリックすると、列Aは元の色に戻り、列Bすべての色が変わる という動きを実現したいです。 2.機能を実現するにはどのようにすればよいのか、どなたかご存知の方ご教授のほどよろしくお願いいたします。 現時点のサンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>テーブルの列の背景色を変える</title> <SCRIPT language="JavaScript"> <!-- function bgcolor(idName){ for ( i=0 ; i < document.all.item(idName).length ; i++ ) { document.all.item(idName, i).style.backgroundColor = "#EE3300"; } } //--> </SCRIPT> </head> <body> <TABLE border="1"> <TR> <TD width="30"> </TD> <TD width="30">列A</TD> <TD width="30">列B</TD> <TD width="30">列C</TD> </TR> </TABLE> <TABLE border="1"> <TR> <TD width="30">行1</TD> <TD width="30" id="td1" onclick="bgcolor('td1')">A1</TD> <TD width="30" id="td2" onclick="bgcolor('td2')">B1</TD> <TD width="30" id="td3" onclick="bgcolor('td3')">C1</TD> </TR> </TABLE> <TABLE border="1"> <TR> <TD width="30">行2</TD> <TD width="30" id="td1" onclick="bgcolor('td1')">A2</TD> <TD width="30" id="td2" onclick="bgcolor('td2')">B2</TD> <TD width="30" id="td3" onclick="bgcolor('td3')">C2</TD> </TR> </TABLE> </body> </html>
- ベストアンサー
- JavaScript
お礼
何度もご回答ありがとうございます_(_^_)_ 本当にLancerVIIさんには頭が上がりません 教えていただいたコードをメモ帳にコピーしてtest.htmlで保存し、gooによってscriptタグが省略されていたので、 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7. … の行を <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> に訂正しました。 このhtmlファイルをfirefox 3.6.25の環境で実行した結果、開いたhtmlの時間セルにマウスオーバーすると、下部にmailto:a@aの表示が出てきて、実行するとメーラーが起動します。 また、コピー機能が有効になりません。 javascriptが有効になっていないのかと思い、調べましたが、有効になっています。 この症状はどのようにしたら解決するのでしょうか。どうかよろしくお願いします。