SQLの窓

2019年01月17日


JavaScript でテーブル要素の td をクリックしてテキストを選択する / Range オブジェクト

Range オブジェクトを使用して td 内部を選択します。

$(function(){
	$("#copy-table-td-text td").each(function(){
		$(this).css({ "cursor" : "default" });
	});

	$("#copy-table-td-text td").on("click",function(){

		if( $(this).get(0).cellIndex > 0  ) {
			var range = document.createRange();
			range.selectNodeContents( $(this).get(0) );
	
			var selection = window.getSelection();
			selection.removeAllRanges();
			selection.addRange(range);
		}
	});
});

イベントと td でのカーソル形状の変更は jQuery でコードを作成しています。

$(this).get(0) で、jQuery より DOM オブジェクトを取得し、cellIndex プロパティを使用して『どの列をクリックしたか』を判定しています
▼ クリックするとテキストを選択します
ファイル名を指定して実行 コマンドプロンプト エクスプローラのアドレス
1 ms-settings:about start ms-settings:about ms-settings:about
2 ms-settings:windowsupdate start ms-settings:windowsupdate ms-settings:windowsupdate
3 shell:startup start shell:startup shell:startup
4 shell:sendto start shell:sendto sendto
5 control control control
6 shell:ControlPanelFolder start shell:ControlPanelFolder shell:ControlPanelFolder
7 mspaint mspaint mspaint
1 %TEMP% start %TEMP% %TEMP%

▲ それぞれ Windows10 で実行可能なコマンドですが、場所によって微妙に引き渡す文字列が違っています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#lboxtable * {
	font-family: メイリオ,'MS Pゴシック';
	font-size: 12px;
}
#lboxtable table {
	border-collapse: collapse;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	background-color: #FFFFFF;
}
#lboxtable td {
	padding: 5px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	/* white-space: nowrap; */
}
#lboxtable th {
	padding: 5px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	background-color: silver;
	/* white-space: nowrap; */
}
#lboxtable .header {
	padding: 5px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	background-color: silver;
	/* white-space: nowrap; */
}
</style>
<script>
$(function(){
	$("#copy-table-td-text td").each(function(){
		$(this).css({ "cursor" : "default" });
	});

	$("#copy-table-td-text td").on("click",function(){

		if( $(this).get(0).cellIndex > 0  ) {
			var range = document.createRange();
			range.selectNodeContents( $(this).get(0) );
	
			var selection = window.getSelection();
			selection.removeAllRanges();
			selection.addRange(range);
		}
	});
});
</script>
<div id="lboxtable">
<strong><span style="color:#3300cc;">▼ クリックするとテキストを選択します</span></strong>
<table id="copy-table-td-text">
<tr>
  <th></th>
  <th>ファイル名を指定して実行</th>
  <th>コマンドプロンプト</th>
  <th>エクスプローラのアドレス</th>
 </tr>
 <tr>
  <td>1</td>
  <td>ms-settings:about</td>
  <td>start ms-settings:about</td>
  <td>ms-settings:about</td>
 </tr>
 <tr>
  <td>2</td>
  <td>ms-settings:windowsupdate</td>
  <td>start ms-settings:windowsupdate</td>
  <td>ms-settings:windowsupdate</td>
 </tr>
 <tr>
  <td>3</td>
  <td>shell:startup</td>
  <td>start shell:startup</td>
  <td>shell:startup</td>
 </tr>
 <tr>
  <td>4</td>
  <td>shell:sendto</td>
  <td>start shell:sendto</td>
  <td>sendto</td>
 </tr>
 <tr>
  <td>5</td>
  <td>control</td>
  <td>control</td>
  <td>control</td>
 </tr>
 <tr>
  <td>6</td>
  <td>shell:ControlPanelFolder</td>
  <td>start shell:ControlPanelFolder</td>
  <td>shell:ControlPanelFolder</td>
 </tr>
 <tr>
  <td>7</td>
  <td>mspaint</td>
  <td>mspaint</td>
  <td>mspaint</td>
 </tr>
 <tr>
  <td>1</td>
  <td>%TEMP%</td>
  <td>start %TEMP%</td>
  <td>%TEMP%</td>
 </tr></tbody>
</table>
</div>




【JavaScript オブジェクトの最新記事】
posted by lightbox at 2019-01-17 14:54 | JavaScript オブジェクト | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり