एचटीएमएल टेबल

Question

के कॉलम में टेक्स्ट का चयन करें क्या यह HTML तालिका के एक लंबवत कॉलम में प्रत्येक सेल के पाठ को चुनना संभव है (यानी इसे हाइलाइट किया गया है ताकि इसे कॉपी किया जा सके।

क्या कोई जावास्क्रिप्ट विधि है, या शायद कुछ टेक्स्ट संपादकों में उपयोग किए जाने वाले Alt-Click-Drag शॉर्टकट में कुछ ब्राउज़र में समकक्ष है?

या यह असंभव है?

Answer 1

जो आप खोज रहे हैं उसे Range ऑब्जेक्ट (TextRange आईई में) कहा जाता है।

अद्यतन: http://jsfiddle.net/4BwGG/3/

जबकि कक्ष सामग्री पर कब्जा करने के लिए, आप किसी भी तरीके से आप चाहते हैं में उन्हें फ़ॉर्मेट कर सकते हैं: यहाँ आप क्या सुझाव दे रहे हैं करने के लिए एक काम कोड है। मैं बस हर बार एक नई लाइन संलग्न कर रहा हूँ।

नोट: एफएफ 3 में

• वर्क्स ठीक है और इसके बाद के संस्करण
• आईई (9 से पहले) और क्रोम एकाधिक चयन का समर्थन नहीं करते।
• क्रोम सभी कोशिकाओं को हाइलाइट नहीं करता है (लेकिन सभी सामग्री को कैप्चर करता है)। IE9
• आईई 7 & 8 के लिए एक त्रुटि फेंक जाएगी।

एक वैकल्पिक एक सीएसएस शैली है कि simulates सभी कक्षों के माध्यम से स्तंभ शीर्ष लेख और पाश के क्लिक पर प्रकाश डाला अपनी सामग्री पर कब्जा करने के लिए लागू है। इस दृष्टिकोण को देखो और महसूस मूल चयन के रूप से अलग हो सकता है (जब तक कि आप किसी भी तरह से चुनिंदा घटना को कैप्चर नहीं करते और उपस्थिति को बदलते हैं)।

फिर क्लिपबोर्ड पर कॉपी करने के लिए jQuery कॉपी प्लगइन का उपयोग करें।

Answer 2

आप एक div जो क्लिक पर स्तंभ में डेटा हो जाता है और स्तंभों का चयन किया जा रहा है की उपस्थिति देने के लिए एक सीएसएस वर्ग लागू हो सकते हैं

कुछ इस तरह:

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

कुछ कोड समीक्षा उपकरण इसे & प्रतिलिपि बनाने के लिए एक पक्ष-दर-पक्ष diff के एक तरफ से कोड चिपकाने की अनुमति देने के लिए कार्यान्वित करते हैं। मैंने देखा कि कैसे ReviewBoard इसे खींचता है।

सार है:

1. जब एक स्तंभ चयन शुरू होता है, शैली user-select: none (और इसके उपसर्ग वेरिएंट, if necessary) के साथ सभी स्तंभों में कोशिकाओं। यह कॉलम चयन की उपस्थिति बनाता है। अन्य कॉलम अभी भी चुपके से चुने गए हैं, इसलिए आपको ...
2. copy ईवेंट को रोकें और चयनित कॉलम की सामग्री को प्रतिबिंबित करने के लिए अपने पेलोड को बदलें।

समीक्षा करने के लिए समीक्षा बोर्ड कोड this CSS और this JavaScript शामिल है।

मैंने इसे काफी कम jsbin demo में खींच लिया।

यहाँ एक एकल-स्तंभ चयन की उपस्थिति बनाने के लिए सीएसएस है (आप सही के लिए मेज पर selecting-left वर्ग को जोड़ने जब बाएँ स्तंभ चयनित किया जा रहा है, या selecting-right):

.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 घटना रोकना और डेटा का एक स्तंभ के मूल्य में प्लग करने के लिए:

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 सीएल जोड़ने के लिए कुछ कम दिलचस्प कोड है चयन की शुरुआत में गधे। एन-कॉलम टेबल को सामान्यीकृत करने के लिए इसे थोड़ा और काम करने की आवश्यकता होगी।

यह प्रैक्टिस में अच्छी तरह से काम करता प्रतीत होता है, लेकिन यह आश्चर्यजनक है कि यह कितना मुश्किल है! अच्छे प्रश्न के लिए