背景
仕事で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