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