javascriptオブジェクトを作成する

Question

私は、javascriptとjQueryでかなりうまくいくと言います。仕事をやり遂げるのに十分です。 しかし私はjsの深い理解が不足しています。

私は、テーブル要素を強調表示するためのいくつかの関数を作成しました。 のctrl +クリックが選択 シフト+ +ドラッグのハイライトの選択をクリックし

を切り替えます私の質問は、私はとても抽象的、この機能を実行する方法

私の実装が最善の方法であるか否かに関係なく、...はありませんこの機能をどのテーブルにも追加できます。ハイライト機能などを追加して、これを独自の.jsファイルに入れるのと同じように。どのようにhtmlテーブルにそれを添付しますか？

ご迷惑をおかけして申し訳ございませんが、何を検索するか考えられませんでした。

ありがとうございます。

****最新コード**** このコードは、独自の.jsファイルであり、自分のテーブルに添付されています。 現在の機能はすべてそこにあります。私が疲れているのは.off（）関数だけです。私の場合は、新しいテーブルをリロードしています....これをタイプすると、常に新しいテーブルを作成するのではなく、テーブルからtrを空にして、オフフック（）コール。

あなたがクラスにその機能を追加し、あなたが影響を与えるしたいのテーブルにそのクラスを追加することができ

$.fn.addEvents = function(obj) 
{ 
console.log("Adding events to table"); 
var properties = $.extend(true, 
    { 
    shifting: false, 
    ctrling: false, 
    mousing: false, 
    mouseenter: 0, 
    mouseleave: 0, 
    mousestartindex: 0, 
    mouseenterindex: 0, 
    mouseleaveindex: 0, 
    trajectory: null, 
    tmptrajectory: null 
    }, obj || {}); 

$(document) 
.off('mouseup') 
.on('mouseup', function(e) 
    { 
    properties.mousing = false; 
    properties.trajectory = null; 
    }) 
.off("keyup") 
.on("keyup", function(e) 
    { 
    if(e.which == 16) 
     { 
     properties.shifting = false; 
     } 
    if(e.which == 17) 
     { 
     properties.ctrling = false; 
     } 
    }) 
.off("keydown") 
.on("keydown", function(e) 
    { 
    if(e.which == 16) 
     { 
     properties.shifting = true; 
     } 
    if(e.which == 17) 
     { 
     properties.ctrling = true; 
     } 
    if($(this).find('tr.selected').length > 0) 
     { 
     switch(e.which) 
      { 
      //case 37: // left 
       //break; 

      case 38: // up 
       var index = $(this).find('tr.selected').index(); 
       if(index > 0) 
        { 
        $(this).find('tr').removeClass('selected'); 
        $(this).find('tr td').removeClass('selected'); 
        $(this).find('tr:eq(' + index + ')').addClass('selected'); 
        $(this).find('tr:eq(' + index + ') td').addClass('selected'); 
        } 
       break; 

      //case 39: // right 
       //break; 

      case 40: // down 
       var index = $(this).find('tr.selected').index(); 
       if(index < $(this).find('tr').length - 2) 
        { 
        $(this).find('tr').removeClass('selected'); 
        $(this).find('tr td').removeClass('selected'); 
        $(this).find('tr:eq(' + (index+2) + ')').addClass('selected'); 
        $(this).find('tr:eq(' + (index+2) + ') td').addClass('selected'); 
        } 
       break; 

      case 117: // f6 
       var index = $(this).find('tr.selected').index(); 
       if(index > 0) 
        { 
        .... 
        } 
       break; 

      case 118: // f7 
       var index = $(this).find('tr.selected').index(); 
       if(index < $(this).find('tr').length - 1) 
        { 
        .... 
        } 
       break; 

      default: return; // exit this handler for other keys 
      } 
     e.preventDefault(); // prevent the default action (scroll/move caret) 
     } 
    return; 
    }); 

return $(this) 
.off('click') 
.off('contextmenu') 
.on('click', function() 
    { 
    if(!properties.ctrling && !properties.shifting) 
     { 
     $('#datatablebody tr, #datatablebody tr td').removeClass('selected'); 
     $(this).addClass('selected'); 
     $(this).find('td').addClass('selected'); 
     } 
    else if(properties.ctrling && $(this).hasClass('selected')) 
     { 
     $(this).removeClass('selected'); 
     $(this).find('td').removeClass('selected'); 
     } 
    else if(properties.ctrling && !$(this).hasClass('selected')) 
     { 
     $(this).addClass('selected'); 
     $(this).find('td').addClass('selected'); 
     } 
    }) 
.on('contextmenu', function(ev) 
    { 
    ev.preventDefault(); 
    $('#datatablebody tr, #datatablebody tr td').removeClass('selected'); 
    $(this).addClass('selected'); 
    $(this).find('td').addClass('selected'); 
    showContextMenuTR($(this).closest('tr').attr('id'), ev.clientX, ev.clientY); 
    return false; 
    }) 
.off('mousedown') 
.on('mousedown', function(e) 
    { 
    properties.mousing = true; 
    properties.mousestartindex = $(this).index(); 
    if(properties.shifting && properties.mousing) 
     { 
     multiselectrow($(this)); 
     } 
    }) 
.off('mouseenter') 
.on('mouseenter', function(e) 
    { 
    properties.mouseenter = e.clientY; 
    properties.mouseenterindex = $(this).index(); 

    if(properties.tmptrajectory === properties.trajectory) 
     { 
     if(properties.shifting && properties.mousing) 
      { 
      multiselectrow($(this)); 
      } 
     } 
    }) 
.off('mouseleave') 
.on('mouseleave', function(e) 
    { 
    properties.mouseleave = e.clientY; 

    if(properties.shifting && properties.mousing) 
     { 
     properties.tmptrajectory = properties.mouseenter - properties.mouseleave < 0?1:-1; 
     } 

    if(properties.trajectory != null && properties.tmptrajectory !== properties.trajectory && $(this).index() !== properties.mousestartindex) 
     { 
     if(properties.shifting && properties.mousing) 
      { 
      multiselectrow($(this)); 
      } 
     } 

    if(properties.shifting && properties.mousing) 
     { 
     if(properties.trajectory == null) 
      { 
      properties.trajectory = properties.tmptrajectory; 
      } 
     else if(properties.tmptrajectory !== properties.trajectory && $(this).index() === properties.mousestartindex) 
      { 
      properties.trajectory = properties.tmptrajectory; 
      } 
     } 
    }) 
.off('mouseup') 
.on('mouseup', function(e) 
    { 
    properties.mousing = false; 
    properties.trajectory = null; 
    if(properties.shifting && properties.mousing) 
     { 
     multiselectrow($(this)); 
     } 
    }); 
} 

function multiselectrow(obj) 
{ 
if($(obj).hasClass('selected')) 
    { 
    $(obj).removeClass('selected'); 
    $(obj).find('td').removeClass('selected'); 
    } 
else 
    { 
    $(obj).addClass('selected'); 
    $(obj).find('td').addClass('selected'); 
    } 
} 

Answer 1

あなたは

$.fn.addEvents = function(obj) { 
    var properties = $.extend(true, { 
     shifting: false, 
     ctrling: false, 
     mousing: false, 
     mouseenter: 0, 
     mouseleave: 0, 
     trajectory: null 
    }, obj || {}); 

    return $(this) 
     .off('click') 
     .off('contextmenu') 
     .on('click', function() { 
      ..... 
     }) 
     .on('mouseleave', function(e) { 

      //rename your local variables with `properties.` prefix 
      properties.mouseleave = e.clientY; 

      if (properties.shifting && properties.mousing) { 
       tmptrajectory = properties.mouseenter - properties.mouseleave < 0 ? 1 : -1; 
      } 

      if ($(this).hasClass('selected') && properties.shifting && properties.mousing && properties.trajectory != null && properties.trajectory != tmptrajectory) { 
       $(this).removeClass('selected'); 
       $(this).find('td').removeClass('selected'); 
      } 
      .... 
     }); 
} 

の使用個々の選択に関連するいくつかのローカル変数を持っているので、あなたは私ができた@JAGから機能に答えるために

$('#datatablebody tr').addEvents({ shifting: false, ctrling: true }); //custom settings 

$('#someother tr').addEvents(); //default settings 

Answer 2

... ここで私は、クラス.myTableBehを作成し、そのクラスを持つすべてのテーブルを使用すると、プログラムの挙動を持つことになります。

var shifting = false; 
    var ctrling = false; 
    var mousing = false; 
    var mouseenter = 0; 
    var mouseleave = 0; 
    var trajectory = null; 

    $('.myTableBeh tr') 
    .off('click') 
    .off('contextmenu') 
    .on('click', function() 
     { 
     if(!ctrling) 
      { 
      $('.myTableBeh tr, .myTableBeh tr td').removeClass('selected'); 
      $(this).addClass('selected'); 
      $(this).find('td').addClass('selected'); 
      } 
     else if(ctrling && $(this).hasClass('selected')) 
      { 
      $(this).removeClass('selected'); 
      $(this).find('td').removeClass('selected'); 
      } 
     else if(ctrling && !$(this).hasClass('selected')) 
      { 
      $(this).addClass('selected'); 
      $(this).find('td').addClass('selected'); 
      } 
     }) 
    .on('contextmenu', function(ev) 
     { 
     ev.preventDefault(); 
     $('.myTableBeh tr, .myTableBeh tr td').removeClass('selected'); 
     $(this).addClass('selected'); 
     $(this).find('td').addClass('selected'); 
     showContextMenuTR($(this).closest('tr').attr('id'), ev.clientX, ev.clientY); 
     return false; 
     }) 
    .off('mousedown') 
    .on('mousedown', function(e) 
     { 
     mousing = true; 
     multiselectrow($(this)); 
     }) 
    .off('mouseenter') 
    .on('mouseenter', function(e) 
     { 
     mouseenter = e.clientY; 
     multiselectrow($(this)); 
     }) 
    .off('mouseleave') 
    .on('mouseleave', function(e) 
     { 
     mouseleave = e.clientY; 

     if(shifting && mousing) 
      { 
      tmptrajectory = mouseenter - mouseleave < 0?1:-1; 
      } 

     if($(this).hasClass('selected') && shifting && mousing && trajectory != null && trajectory != tmptrajectory) 
      { 
      $(this).removeClass('selected'); 
      $(this).find('td').removeClass('selected'); 
      } 

     if(shifting && mousing && trajectory == null) 
      { 
      trajectory = tmptrajectory; 
      } 
     }) 
    .off('mouseup') 
    .on('mouseup', function(e) 
     { 
     mousing = false; 
     trajectory = null; 
     multiselectrow($(this)); 
     }); 

Answer 3

感謝をこのすべてをラップすることができますハイライトを扱うHTMLテーブルにすばらしいアドオンを作成します。

作業用のバージョンを確認してください。あなたのサイトに役立つか役立っている場合は、それを使用してください。

trをテーブルの上または下に移動するキーを実装することもできます。私が取り組んでいるプロジェクトに固有のものなので、実装を削除しました。

私はそれを操作するためにテーブルの上にマウスを置いてマウスを離して、フォーカスを外してください。

https://jsfiddle.net/kwj74kg0/2/は

//Add the events simply by running this 
$('#dtable tr').addEvents(0); 


/** 
* This add on can be applied and customized to any html tr set i.e. $('#tableid tr').addEvents() 
* It will add highlighting capability to the table. 
* 
* Single click highlight tr 
* Click -> Shift + click highlight/toggle range 
* Shift+MouseDown+Drag highlight/toggle range 
* Ctrl+Click toggle item 
* 
* 
* @author Michaela Ervin 
* 
* @param tabindex 
* 
* Help from JAG on http://stackoverflow.com/questions/39022116/create-a-javascript-object 
*/ 
$.fn.addEvents = function(tabindex) 
{ 
console.log("Adding events to table"); 
var properties = $.extend(true, 
    { 
    shifting: false, 
    ctrling: false, 
    mousing: false, 
    mouseenter: 0, 
    mouseleave: 0, 
    mousestartindex: 0, 
    mouseenterindex: null, 
    mouseleaveindex: null, 
    trajectory: null, 
    tmptrajectory: null 
    }, {}); 

/** 
* Add events to closest table. 
*/ 
$(this) 
.closest('table') 
.attr('tabindex', tabindex) 
.off('mouseenter') 
.on('mouseenter', function() 
    { 
    $(this).focus(); 
    }) 
.off('mouseleave') 
.on('mouseleave', function() 
    { 
    $(this).blur(); 
    properties.mousing = false; 
    properties.trajectory = null; 
    properties.mouseenterindex = null; 
    properties.mouseleaveindex = null; 
    properties.mouseintermediateindex = null; 
    }) 
.off("keyup") 
.on("keyup", function(e) 
    { 
    if(e.which == 16) 
     { 
     properties.shifting = false; 
     } 
    if(e.which == 17) 
     { 
     properties.ctrling = false; 
     } 
    }) 
.off("keydown") 
.on("keydown", function(e) 
    { 
    if(e.which == 16) 
     { 
     properties.shifting = true; 
     } 
    if(e.which == 17) 
     { 
     properties.ctrling = true; 
     } 
    if($(this).find('tr.selected').length > 0) 
     { 
     switch(e.which) 
      { 
      //case 37: // left 
       //break; 

      case 38: // up 
       var index = $(this).find('tr.selected').index(); 
       if(index > 0) 
        { 
        $(this).find('tr').removeClass('selected'); 
        $(this).find('tr td').removeClass('selected'); 
        $(this).find('tr:eq(' + index + ')').addClass('selected'); 
        $(this).find('tr:eq(' + index + ') td').addClass('selected'); 
        } 
       break; 

      //case 39: // right 
       //break; 

      case 40: // down 
       var index = $(this).find('tr.selected').index(); 
       if(index < $(this).find('tr').length - 2) 
        { 
        $(this).find('tr').removeClass('selected'); 
        $(this).find('tr td').removeClass('selected'); 
        $(this).find('tr:eq(' + (index+2) + ')').addClass('selected'); 
        $(this).find('tr:eq(' + (index+2) + ') td').addClass('selected'); 
        } 
       break; 

      case 117: // f6 
       var index = $(this).find('tr.selected').index(); 
       if(index > 0) 
        { 
        //Function to move tr 'up'. 
        } 
       break; 

      case 118: // f7 
       var index = $(this).find('tr.selected').index(); 
       if(index < $(this).find('tr').length - 1) 
        { 
        //Function to move tr 'down'. 
        } 
       break; 

      default: return; // exit this handler for other keys 
      } 
     e.preventDefault(); // prevent the default action (scroll/move caret) 
     } 
    return; 
    }); 


/** 
* Add tr specific events 
*/ 
return $(this) 
.off('click') 
.on('click', function() 
    { 
    if(!properties.shifting && properties.mouseenterindex != null) 
     { 
     properties.mouseenterindex = null; 
     properties.mousing = false; 
     } 

    if(!properties.ctrling && !properties.shifting && properties.mouseenterindex == null) 
     { 
     $(this).parent().find('tr').removeClass('selected'); 
    $(this).parent().find('tr td').removeClass('selected'); 
     $(this).addClass('selected'); 
     $(this).find('td').addClass('selected'); 
     } 
    else if(properties.ctrling && $(this).hasClass('selected')) 
     { 
     $(this).removeClass('selected'); 
     $(this).find('td').removeClass('selected'); 
     } 
    else if(properties.ctrling && !$(this).hasClass('selected')) 
     { 
     $(this).addClass('selected'); 
     $(this).find('td').addClass('selected'); 
     } 

    if(properties.mouseenterindex == null) 
     { 
     properties.mouseenterindex = $(this).index(); 
     } 
    else if(properties.shifting && properties.mouseenterindex != null) 
     { 
     properties.mouseleaveindex = $(this).index(); 
     highlightRange($(this).parent(), properties.mouseenterindex, properties.mouseleaveindex, properties.mouseenterindex); 
     properties.mouseenterindex = null; 
     properties.mouseleaveindex = null; 
     } 
    }) 
.off('contextmenu') 
.on('contextmenu', function(ev) 
    { 
    ev.preventDefault(); 
    $(this).parent().find('tr').removeClass('selected'); 
    $(this).parent().find('tr td').removeClass('selected'); 
    $(this).addClass('selected'); 
    $(this).find('td').addClass('selected'); 
    //Put your context menu here 
    return false; 
    }) 
.off('mousedown') 
.on('mousedown', function(e) 
    { 
    properties.mousing = true; 
    properties.mousestartindex = $(this).index(); 
    if(properties.shifting && properties.mousing && properties.mouseenterindex == null) 
     { 
     multiselectrow($(this)); 
     } 
    }) 
.off('mouseenter') 
.on('mouseenter', function(e) 
    { 
    properties.mouseenter = e.clientY; 

    if(properties.tmptrajectory === properties.trajectory) 
     { 
     if(properties.shifting && properties.mousing) 
      { 
      multiselectrow($(this)); 
      } 
     } 
    }) 
.off('mouseleave') 
.on('mouseleave', function(e) 
    { 
    properties.mouseleave = e.clientY; 

    if(properties.shifting && properties.mousing) 
     { 
     properties.tmptrajectory = properties.mouseenter - properties.mouseleave < 0?1:-1; 
     } 

    if(properties.trajectory != null && properties.tmptrajectory !== properties.trajectory && $(this).index() !== properties.mousestartindex) 
     { 
     if(properties.shifting && properties.mousing) 
      { 
      multiselectrow($(this)); 
      } 
     } 

    if(properties.shifting && properties.mousing) 
     { 
     if(properties.trajectory == null) 
      { 
      properties.trajectory = properties.tmptrajectory; 
      } 
     else if(properties.tmptrajectory !== properties.trajectory && $(this).index() === properties.mousestartindex) 
      { 
      properties.trajectory = properties.tmptrajectory; 
      } 
     } 
    }) 
.off('mouseup') 
.on('mouseup', function(e) 
    { 
    properties.mousing = false; 
    properties.trajectory = null; 
    if(!properties.shifting) 
     { 
     properties.mouseenterindex = null; 
     properties.mouseleaveindex = null; 
     } 
    }); 
} 

function multiselectrow(obj) 
{ 
if($(obj).hasClass('selected')) 
    { 
    $(obj).removeClass('selected'); 
    $(obj).find('td').removeClass('selected'); 
    } 
else 
    { 
    $(obj).addClass('selected'); 
    $(obj).find('td').addClass('selected'); 
    } 
} 

function highlightRange(obj, start, end, mouseenterindex) 
{ 
if(start < end) 
    { 
    for(var i=start; i<=end; i+=1) 
     { 
     if(i !== mouseenterindex) 
      { 
      multiselectrow($(obj).find('tr').eq(i)); 
      } 
     } 
    } 
else 
    { 
    for(var i=start; i>=end; i-=1) 
     { 
     if(i !== mouseenterindex) 
      { 
      multiselectrow($(obj).find('tr').eq(i)); 
      } 
     } 
    } 
}