How to select the contents in the table cell

[sweetgishow]

Thank you very much for this amazing script. I’ve been using it on many of my pages and it really saves me a lot of time. Recently one of my users wants to select the contents in the table cell and do a “ctrl + c”, and he asked me how to select the contents in the table. I tried various ways with no luck. Can you please let me know how to do that?

Thanks,
Victor

[nuxy]

I have updated Tidy-Table (v1.4) to include postProcess options for this purpose. The new code, which currently deprecates the column event callback, will make it a lot easier to post-process table cell behavior and results.

To answer your question please note the following example:

$(document).ready(function() {
    $('#container')
        .TidyTable({
            columnTitles : ['Column 1','Column 2','Column 3'],
            columnValues : [
                ['Value 1A','Value 1B','Value 1C'],
                ['Value 2A','Value 2B','Value 2C']
            ],
            postProcess : {
                column : postProcessCol
            }
        });

    function postProcessCol(obj) {
        obj.bind('click', function() {
            var $this = $(this);

            if ($this.find('input')[0]) return;

            // create input element
            var field = $('<input></input>')
                .attr({
                    type  : 'text',
                    value : $this.text()
                });

            $this.html(field);

            field.bind('mouseover', function() {
                var elm = this;

                // focus cursor on text
                elm.selectionStart = elm.selectionEnd = elm.value.length;
                elm.focus();
            });
        });
    }
});

You can find more postProcess examples in the README provided with this package.

Closing this issue.

[sweetgishow]

Thanks. The example didn't work. Whatever that is in the table cells, even it's a input box, can't be selected.
However I got a workaround by the postProcess function:

function postProcessCol(obj) {
    obj.bind('click', function() {
        $("#div_display_cell_content").html($(this).text());
    });
}

Again, thanks very much!

[nuxy]

There was a minor bug in the code I provided that prevented this.

var field = $('<input><input>')

should actually be

var field = $('<input></input>')  // missing closing forward slash

Further, in Firefox there seems to be a bug when auto-selecting text from an input element. Note - this works on other web browsers (including Internet Explorer) without issue, which is surprising.

A workaround for this is:

field.bind('mouseover', function() {
    var elm = this;

    // focus cursor on text
    elm.selectionStart = elm.selectionEnd = elm.value.length;
    elm.focus();
});

I have updated the example code with the changes above for clarity.

[sweetgishow]

Works like a charm. Thank you very much.

Victor

2013/6/30 Marc S. Brooks notifications@github.com

There was a minor bug in the code I provided that prevented this.

var field = $('')

should actually be

var field = $('') // missing closing forward slash

Further, in Firefox there seems to be a bug when auto-selecting text
from an input element. Note - this works on other web browsers (including
Internet Explorer) without issue, which is surprising.

A workaround for this is:

field.bind('mouseover', function() {
var elm = this;

// focus cursor on text
elm.selectionStart = elm.selectionEnd = elm.value.length;
elm.focus();});

I have updated the example code with the changes above for clarity.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/4#issuecomment-20233619
.