Column > 【html, css, jQuery】<table>の表を改造する
2017/2/26 【html, css, jQuery】<table>の表を改造する

htmlで表を使いたいときは<table>タグで作ることが出来ますが、
そのまま使うだけだとちょっと味気ないかなと思ったので
下のような表を作ってみました。

クリップボードにコピーしました
value
れつ１ れつ２ れつ３
ぎょう１ せる１ せる２ せる３
ぎょう２ せる４ せる５ せる６
ぎょう３ せる７ せる８ せる９
ぎょう４ せる１０ せる１１ せる１２
ぎょう５ せる１３ せる１４ せる１５
↓↓↓貼り付けてみて↓↓↓

マウスが置かれた場所に対応する表の行と列にハイライトが入り、
セルをクリックするとその内容がクリップボードにコピーされるようになっています。

作り方を以下に書いていきます。



目次



1. 表の雛型

まずは表の雛型を作ります。

See the Pen vxBoNL by toera (@toera) on CodePen.

列の部分にはrow、行の部分にはcolというクラスをつけることで
マウスポインタの現在位置が何列の何行目にあるのかを
後から知ることができるようにしています。

表の中のセルの部分は、クリックされた時に文章をコピーできるようにしたいので、
copyというクラスを付けておきます。
また、クリックできることを分かりやすくするために
cursor: pointer;というcssでマウスポインタのアイコンが変わるようにしています。



2. ハイライトを入れる
2-1. 行にハイライト

次はマウスが乗った時にハイライトを入れていきます。
まずは行にマウスが乗った時に入るようにします。

ハイライトの入れ方は、マウスが入った時と出て行ったときに
専用のクラスを付けたり外したりして実装します。

実装にはjQueryを使うので、まずはHTMLで読み込みます。
<head>
 <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>



次に行のハイライトを変えるためのJavaScriptを書いていきます。
$(function(){
  // 行だけハイライト
  $('.col').mouseenter(function(){
    colsHighlightOn(this);
  }).mouseleave(function(){
  	colsHighlightOut(this);
  });
});

// 行にハイライトを入れる
function colsHighlightOn(_this){
  $(_this).parent().find('*').each(function(){
    $(this).addClass("tableselect");
  });
}

// 行のハイライトを消す
function colsHighlightOut(_this){
  $(_this).parent().find('*').each(function(){
    $(this).removeClass("tableselect");
  });
}
.colクラス(ぎょう)にマウスが乗った時は
マウスの乗った部分と、それに対応するセルにtableselectクラスを付けて
マウスが外れた時はtableselectクラスを外すことでハイライトを付けています。

同じ行の.colクラスとセルは親子関係が同じ位置にあるので
parent().find("*")でこれらを全て選んでクラスの付け替えをしています。

こちらを参考にして作りました。
http://www.finefinefine.jp/jquery/kiji2167/



2-2. 列にハイライト

次は列にハイライトを入れていきます。
$(function(){
  // 列だけハイライト
  $('.row').mouseenter(function(){
    rowsHighlightOn(this, $(".row"));
  }).mouseleave(function(){
    rowsHighlightOut(this, $(".row"));
  });
});

// 列にハイライトを入れる
function rowsHighlightOn(_this, _index){
  $num = $(_index).index(_this);
  $("table tr").each(function(){
    $(this).find("td").eq($num).addClass("tableselect");
  });
  $("table .row").eq($num).addClass("tableselect");
}

// 列のハイライトを消す
function rowsHighlightOut(_this, _index){
  $num = $(_index).index(_this);
  $("table tr").each(function(){
    $(this).find("td").eq($num).removeClass("tableselect");
  });
  $("table .row").eq($num).removeClass("tableselect");
}
ハイライトの入れ方は、行の場合と同じく
tableselectクラスの付け外しによって行っていますが、
列の場合はハイライトを入れたいセル同士の親が違うので、
マウスの当たった列を変数$numに入れています。
2-3. セルにハイライト

最後に表の中のセルにマウスを置いた場合の処理を書きます。
これまでの節で作った関数を使いまわしています。
$(function(){
  // 列と行の両方ハイライト
  $('table td').mouseenter(function(){
    // 列
    $tdind = $(this).parent().find('td');
    rowsHighlightOn(this, $tdind);
    // 行
    colsHighlightOn(this);
    // 自分自身
    $(this).addClass("tableselecton");
  }).mouseleave(function(){
    // 列
    $tdind = $(this).parent().find('td');
    rowsHighlightOut(this, $tdind);
    // 行
    colsHighlightOut(this);
    // 自分自身
    $(this).removeClass("tableselecton");
  });
});
マウスの当たっているセルは他のものと色を変えたかったので
tableselectonクラスを新たに用意して使っています。



ここまでを実装した状態がこんな感じです。

See the Pen column23_sample2 by toera (@toera) on CodePen.




3. クリップボードにコピー

最後にクリックしたセルをクリップボードにコピーする処理を作っていきます。

この部分の処理にはclipboard.jsというライブラリを使ってみました。
まずはHTMLでこのファイルを読み込みます。
<head>
 <script src="https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js"></script>
</head>



次にクリップボードに文章がコピーされたことを知らせるための要素を作ります。
<body>
 <div id="notice_clipboard">クリップボードにコピーしました<div id="copyValue">value</div></div>
 <table class="clipboard_table">
 <!-- 以下略 -->
</body>
#notice_clipboard{
	border-radius:8px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	width: 500px;
	height: 50px;
	border: 3px solid #65cb00;
	background: repeating-linear-gradient(-45deg, #ccff99, #ccff99 5px, #edffbb 0, #edffbb 10px);
	padding-top: 5px;
	position: fixed;
	left: 50%;
	/* -width / 2 を指定する (leftは要素の開始位置だから) */
	margin-left: -250px;
	top: -65px;
	text-align: center;
}

#copyValue{
	color: red;
	font-size: 18px;
}
cssでposition: fixed;としているので
html内のどの位置に書いても表示される場所は変わりませんが、
わかりやすいように<table>の上に書きました。



次にクリップボードにコピーをするためのコードを書きます。
$(function(){
  // copyクラスがクリックされると、data-clipboard-textをコピー
  var cp = new Clipboard(".copy");

  // クリップボードにコピーされたことを知らせる
  $('.copy').on('click', function(){
    var notice = $('#notice_clipboard');
    notice.stop(true,false).animate({top:'3px'}, 500).animate({top:'3px'}, 1000).animate({top:'-65px'}, 500);
    $('#copyValue').text($(this).attr('data-clipboard-text'));
  });
});
<td class="copy" data-clipboard-text="せる１">せる１</td>
こちらを参考に作りました。
http://qiita.com/satthi/items/b4123c7683b4c3d93bf4

copyクラスがクリックされると、クリックされた要素の
data-clipboard-text属性の文章がクリップボードにコピーされて
そのことを知らせる#notice_clipboardが上から現れるようになっています。
#notice_clipboardには、どんな文章がコピーされたかも
表示されるようになっています。



完成した状態がこんな感じです。

See the Pen column23_sample3 by toera (@toera) on CodePen.


clipboard.jsを使うことで、クリップボードにコピーする処理が
1行で書けたので便利だなぁと思いました。
    Please
    Share!
  • feedly
  • facebook
  • twitter
  • hatena bookmark
  • pocket
  • Google plus

inserted by FC2 system