HTMLテーブルの列内のテキストを選択

Question

HTMLテーブルの1つの垂直列にあるすべてのセルのテキストを選択（つまり、コピー+貼り付けできるようにハイライト表示）することは可能ですか？

多くのテキストエディタで使用されているAlt-Click-DragショートカットにはJavaScriptメソッドまたは同等のブラウザがありますか？

これは不可能ですか？

Answer 1

あなたが探しているのはRangeオブジェクト（IEではTextRange）です。

更新：http://jsfiddle.net/4BwGG/3/

をセルの内容をキャプチャしながら、あなたが望む任意の方法でそれらをフォーマットすることができます。 ここでは示唆されているものを行うには動作するコードです。私は単に毎回新しい行を追加しています。

注：

• 作品FF 3で罰金と
• （9前）IEとChromeの上には、複数選択をサポートしていません。
• Chromeはすべてのセルをハイライト表示しません（ただし、すべてのコンテンツをキャプチャします）。 IE9でも同じです。
• IE 7 & 8はエラーを投げます。

代替はが自分のコンテンツをキャプチャするために、すべてのセルを介して列ヘッダーとループのクリックでハイライト表示をシミュレートすることをCSSスタイルを適用します。このアプローチのルック・アンド・フィールは、ネイティブ選択の外観とは異なる場合があります（何らかの理由で選択イベントをキャプチャして表示を変更しない限り）。

jQueryコピープラグインを使用してクリップボードにコピーします。

Answer 2

あなたはクリックで列データが読み込まれますdiv要素を持っていると列にこのような

何か選択されているのappearence与えるCSSクラスを適用することができます：

var $mytable = $("#mytable"), 
    $copydiv = $("#copy_div"); 

$mytable.find("td").click(function(){ 

    //get the column index 
    var $this = $(this), 
     index = $this.parent().children().index($this); 

    //find all cells in the same column 
    $mytable.find("tr:nth-child(" + index + ")").removeClass("selected").each(function() { 
     var $this = $(this); 
     $this.addClass("selected"); 
     $copydiv.html($this.html() + "<br />"); 
    }); 
}); 

か可能性を各列に別々の表がありますが、それはそれがそれに値するとは思いません。

Answer 3

一部のコードレビューツールでは、これを実装して、&のコードをside-by-side diffの片面から貼り付けることができます。私はReviewBoardがどのようにそれを引き出すのか調べました。

要旨は次のとおりです。

1. 列選択が始まると、スタイルはuser-select: noneと他のすべての列のセル（とそのプレフィックス変種、if necessary）。これにより、列選択の外観が作成されます。他の列はまだ秘密に選択されていますので、...
2. copyイベントを代行受信し、選択した列の内容を反映するようにペイロードを変更します。

これを行うレビューボードコードはthis CSSとthis JavaScriptで構成されています。

私はそれをかなり最小限のjsbin demoに引き出しました。ここで

は（あなたは左の列が選択されているときに、テーブルにselecting-leftクラスを追加、または右用selecting-right）単一列選択の外観を作成するために、CSSです：

.selecting-left td.right, 
.selecting-left td.right *, 
.selecting-right td.left, 
.selecting-right td.left *, 
    user-select: none; 
} 

.selecting-left td.right::selection, 
.selecting-left td.right *::selection, 
.selecting-right td.left::selection, 
.selecting-right td.left *::selection, 
    background: transparent; 
} 

ここですcopyイベントをインターセプトし、データの単一の列の価値をプラグインするためにはJavaScript：

tableEl.addEventListener('copy', function(e) { 
    var clipboardData = e.clipboardData; 
    var text = getSelectedText(); 
    clipboardData.setData('text', text); 
    e.preventDefault(); 
}); 

function getSelectedText() { 
    var sel = window.getSelection(), 
     range = sel.getRangeAt(0), 
     doc = range.cloneContents(), 
     nodes = doc.querySelectorAll('tr'), 
     text = ''; 

    var idx = selectedColumnIdx; // 0 for left, 1 for right 

    if (nodes.length === 0) { 
    text = doc.textContent; 
    } else { 
    [].forEach.call(nodes, function(tr, i) { 
     var td = tr.cells[tr.cells.length == 1 ? 0 : idx]; 
     text += (i ? '\n' : '') + td.textContent; 
    }); 
    } 

    return text; 
} 

selecting-leftとselecting-right CLを追加するためのいくつかのより少なく興味深いコードもあります選択の開始時にお尻。これには、n列の表に一般化するためにもう少し作業が必要です。

これは実際にはうまくいくようですが、それはどれほど難しいのですか？