0

私は次の tablesorter ウィジェットを持っています。これは、tdクリックすると要素を contentEditable div にしtd、ユーザーがセルの外側をクリックすると s に戻します。

$simjq.tablesorter.addWidget({
    id: 'makeColumnsEditable',

    format:function(table){
        var searchString = '',
            targetColumns = table.config.widgetOptions
                                 .makeColumnsEditable.targetColumns,
            inClick = false,
            thisCell = $simjq(),
            thisCellHtml = null;

        while (targetColumns.length){
            searchString.length ? 
                searchString += (',td:eq('+targetColumns.pop()+')') :
                    searchString += ('td:eq('+targetColumns.pop()+')');
        }

        function exitSelection(){
            //Re-attach text to cell and get rid of the div
            thisCellHtml = thisCell.children('div').html();
            thisCell.empty();
            thisCell.html(thisCellHtml);

            //Exit current selection
            thisCell = $simjq();

            //unbind handler from document
            $simjq(document).unbind('click', exitSelection)
        }

        $simjq(table).find('tr').each(function(){
            $simjq(this).find(searchString).on('click', function(event){
                if(!inClick || (thisCell[0] == $simjq(this)[0])){
                    event.stopPropagation();
                    if (thisCell[0] != $simjq(this)[0]){
                        inClick = true;

                        thisCell = $simjq(this);
                        thisCellHtml = thisCell.html();
                        thisCell.empty();
                        thisCell.append('<div contentEditable="true">'
                                           +thisCellHtml + '</div>');

                        $simjq(document).bind('click', exitSelection);
                    }
                } else {
                    //Allow click to bubble up to document
                    inClick = false;
                };
            });
        });
    }
});

私の問題は、クリックがdivcontentEditable div に変わると、それらが選択されないため、ターゲット要素を入力して編集するために余分なクリックが必要になることです。余分なクリックを要求するのではなく、div をクリックしたときに、編集可能な div を入力する (つまり、テキストにカラットを配置する) にはどうすればよいですか?

4

0 に答える 0