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: メイリオ,'ＭＳ Ｐゴシック';
	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 オブジェクト

JavaScript : window オブジェクトのプロパティとしてグローバル変数を定義する

ほぼ、Google Chrome 限定ですが Web Speech API の現時点での実装と問題点回避方法

Google Chrome での音声認識処理

Google Chrome で音声認識の結果をブログの投稿テキストエリアに転送するブックマークレット

JavaScript の String と Date オブシェクトに、9999/99/99 書式の文字列日付を取り出すメソッドを追加する

JavaScript オブジェクト作成の４態

JavaScript の function を new したものが、JSON フォーマットで記述した『Object』と同じである事のテスト

JavaScript による半角と全角の相互変換(カタカナを除く)完成版

Three.js で行われている整然としたクラス作成

JSON オブジェクトの stringify メソッドの第３引数の使い方

JS : 自分用名前空間を使ってページのロードイベントを登録

Object.prototype が window オブジェクトに適用されるおはなし

JS : クロスドメインの IFRAME からデータを JSON 形式で引き渡す

JavaScript : 右から指定した文字数を取りだす right メソッドを String オブジェクトに追加

JSON と文字列の関係

JavaScript : ネームスペースの作成

JavaScript : HTMLの要素内のイベント記述で複雑な処理を書く方法( 関数を定義したく無い場合 )

JavaScript : 無名関数(メソッド)の実行

JavaScript : Numberオブジェクトに16進数文字列に変換して指定した長さで前にゼロを付けるメソッドを追加する

JavaScript : String オブジェクトの replace メソッドの第二引数に関数を指定する一括置き換え処理