デモページ 1) TABLE データを TAB と 改行で作成して Excel に貼り付けて使用し、 ページ上のデータを加工して最終的にクリップボードにコピーするので、text プロパティにイベントを設定する 2) 入力した内容をそのままクリップボードに転送する data-clipboard-target で対象の INPUT を設定する( とても簡単 )
<!DOCTYPE html> <html> <head> <meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport"> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script> <link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css"> <script> // clipboard.js が読み取る変数 var clipbpardText = ""; $(function(){ // ********************************************** // テーブルデータ用クリップボード処理オブジェクト // ********************************************** var clipboard = // クリップボードへの転送のトリガとなるボタンを第一引数に指定 new ClipboardJS('#action1' , { text: function(trigger) { // #action1 console.dir(trigger); // clipboard.js に渡す( このデータがクリップポードに転送される ) return clipbpardText; } }); // ********************************************** // クリップボードへの転送に成功した時に // 実行されるイベント( 無くても良い ) // ********************************************** clipboard.on('success', function(e) { alert("テーブルデータをクリップボードにコピーしました"); }); $("#action1").on("click", function(){ // ********************************************** // clipbpardText にクリップボードに転送したい文字列をセットする // ********************************************** var work = ""; $("#tbl tr").each( function( row_cnt ){ $(this).find("td,th").each(function( col_cnt ){ if ( col_cnt != 0 ) { work += "\t"; } work += $(this).text(); }); work += "\r\n"; }); clipbpardText = work; }) // ********************************************** // テキストボックス用クリップボード処理オブジェクト // data-clipboard-target 要素で 対象を設定 // ********************************************** var clipboard2 = new ClipboardJS('#action2'); // ********************************************** // クリップボードへの転送に成功した時に // 実行されるイベント( 無くても良い ) // ********************************************** clipboard2.on('success', function(e) { alert("テキストボックスの内容をクリップボードにコピーしました"); }); }); </script> </head> <body> <div id="head"> <input type="button" id="action1" value="クリップボードへコピー"> <input type="button" id="action2" value="クリップボードへコピー" data-clipboard-target="#text"> <input type="text" id="text" value="このテキスト"> </div> <div id="extend"> <table class="table"> <tbody id="tbl"> <tr><th>社員コード</th><th>氏名</th><th>フリガナ</th><th>所属</th><th>性別</th><th>作成日</th><th>更新日</th><th>給与</th><th>手当</th><th>管理者</th><th>生年月日</th></tr> <tr><td>0001</td><td>山田 太郎</td><td>ウラオカ トモヤ</td><td>0003</td><td>0</td><td>2005-09-12</td><td>2005-11-28</td><td>400000</td><td>9000</td><td>0001</td><td>2012/03/21</td></tr> <tr><td>0002</td><td>山村 洋代</td><td>ヤマムラ ヒロヨ</td><td>0003</td><td>1</td><td>2005-06-17</td><td>2005-09-18</td><td>300000</td><td></td><td>0001</td><td>2001/01/02</td></tr> <tr><td>0003</td><td>多岡 冬行</td><td>タオカ フユユキ</td><td>0002</td><td>0</td><td>2005-08-14</td><td>2005-11-14</td><td>250000</td><td></td><td>0001</td><td>2001/01/01</td></tr> <tr><td>0004</td><td>高田 冬美</td><td>タカタ フユミ</td><td>0003</td><td>1</td><td>2005-06-13</td><td>2005-10-05</td><td>250000</td><td></td><td>0001</td><td>2001/01/01</td></tr> <tr><td>0005</td><td>内高 友之</td><td>ウチタカ トモユキ</td><td>0003</td><td>0</td><td>2005-09-12</td><td>2005-11-10</td><td>150000</td><td></td><td></td><td>2001/01/01</td></tr> </tbody> </table> </div> </body> </html>
|
【jQueryの最新記事】
- 一般的な PHP のアップロードページに対して jQuery の $.ajax でファイルをアップロードする
- jQuery の $.ajax で JSON 文字列を WEB より取得して TABLE を作成する
- jQuery で DIV の中の DIV を縦横中央に配置する
- jQuery で ページ内の画像のリンク切れを探してテーブルに URL を表示する
- クリックした入力フィールド以外をブラックアウトする jQuery プラグイン
- FORM の内容を localStorage に保存する jQuery プラグイン
- tableMagic : 単純に JSON から TABLE、TR、TH、TR、TD を作成する jQuery のプラグイン
- 滑らかなスクロール(scroll bar)を提供する jQuery プラグイン jQuery.NiceScroll
- jQuery : F1 キーでヘルプを起動させないようにする
- jQuery プラグイン jquery.balloon.js に jQuery UI を追加してバルーン毎に違ったアニメーション効果を設定する
- jquery.balloon.js で、balloon をメッセージ表示に使う( ゲーム等で使う為 )
- jQuery プラグイン jquery.balloon.js で複数バルーンにそれぞれ別のコンテンツを設定する為には、.each を使う
- jQuery プラグイン jquery.balloon.js を使用する『画像バルーン』の処理 (Excel で作成した吹き出し)
- jQuery プラグイン jquery.balloon.js の外部からのコントロール
- NAVER : Image*After の城と教会編
- 親(parent) フレームに jQuery が無い場合に jQuery をインストールする。
- jQuery で書かれた、幻想的な動く星座のようなシーン
- jQuery の addClass で、CSS で作成するサイフの出来上がる過程を見れるようにしました
- jQuery/JavaScript でフルスクリーンAPI( スクロールしないし、こりゃあ、WebGL の為にあるような・・・ )
- CSS transition : jQuery の addClass と removeClass で変化を付ければいい。いや、これが一番よさそうだ。