デモページ 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>
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
