背景

仕事でIE10対象のWEBシステムを作っています。
「ボタンを押したらTable要素が範囲選択されて、Excelにコピペできるよ～」という機能があるのですが、ちょっとハマったので、まとめてみました。

問題

Table要素を範囲選択すると、「SCRIPT606: エラー 800a025e のため操作を完了できませんでした。」というエラーが発生します。

コード

test.js

/**
 * 対象の要素を範囲選択する。(IE10用)
 */
function selectRange(elm) {
  if (typeof elm === "string") {elm = document.getElementById(elm);}
  var range = document.selection.createRange();
  range.moveToElementText(elm);
//「SCRIPT606: エラー 800a025e のため操作を完了できませんでした。」というエラーの発生箇所
  range.select();  
}

test.html

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src="test.js"></script>
</head>
<body>
<div id="sampleDiv">
 Inner DIV
<table id="sampleTable">
  <thead id="sampleTHead">
    <tr id="sampleHeadRow">
      <th id="sampleHeadCell">ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody id="sampleTBody">
    <tr id="sampleBodyRow">
      <td id="sampleBodyCell">1</td>
      <td>Taro</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jiro</td>
    </tr>
  </tbody>
</table>
</div>
<span id="sampleText">Sample Text</span>
</body>
</html>

結果

選択対象によって成功するときと失敗するときがあります。
それをまとめました。

選択対象	実行した処理	成功/失敗
Table要素を囲むDiv要素	`selectRange("sampleDiv");`	成功
Table要素	`selectRange("sampleTable");`	失敗
TBody要素	`selectRange("sampleTBody");`	失敗
THead要素	`selectRange("sampleTHead");`	失敗
THead内のtr要素	`selectRange("sampleHeadRow");`	失敗
THead内のth要素	`selectRange("sampleHeadCell");`	成功
TBody内のtr要素	`selectRange("sampleBodyRow");`	失敗
TBody内のtd要素	`selectRange("sampleBodyCell");`	成功

失敗するときは、 range.select(); の処理で、「SCRIPT606: エラー 800a025e のため操作を完了できませんでした。」というエラーが発生します。

考察

Table要素を囲むDIV要素を選択対象にしたら、解決できました。

td/th要素なら選択できましたが、tr/tbody/thead/table要素は選択できませんでした。
規則性はよく分かりません。

そもそもFirefoxやIE11なら、このような問題は発生しないので、調査はここまでにします。
早く対象ブラウザをIE11にして～

参考サイト

https://teratail.com/questions/30270
http://stackoverflow.com/questions/22914075/javascript-error-800a025e-using-range-selector