使用ctrl键选择行，使用敲除和jquery

我使用jquery模板来绑定来自敲除obervable数组的数据，如下所示

<script id="instructorTemplate" type="text/x-jquery-tmpl">
   <tr class="clickableRow">
     <td style="padding: 0px;text-align: left" >${Id}</td>
     <td style="padding: 0px;" >${UserName}</td>
   </tr>
</script>

但我只想使用ctrl键选择2行。如果可能，也可以按住shift键并选择多行。就像我们使用windows选择多个文件一样。但当我使用shift键选择多行时，它应该给我该选择中第一行和最后一行的值

希望它是清楚的。如何做到这一点

更新

我想要的功能与jqgrid一样，但没有jqgrid

编辑： 经过一些修复后的最终答案：

您启动得很好，检测到列表行上的单击事件。 现在需要区分常规单击、ctrl/cmd+鼠标单击和shift+鼠标单击

幸运的是，jQuery提供了很多方法来检测e.ctrlKey、e.shiftKey和e.metaKey

看看这把小提琴，看看它们是如何工作的：

})

附言：

---

如果要实现最多两行的选择，可以通过检查当前金额$'list li.selected'。选定项目的长度，然后将当前选择标记为selected。

是否有人可以告诉我其被否决的原因？在您的示例中，我只能使用ctrl键选择项目。如何选择两行？在我的示例中，按住ctrl键并单击将所选项目添加到当前选择中，按住shift键并单击将在两个选择之间添加所有项目，就像选择文件时在windows文件夹中一样：但在您的情况下，我无法使用ctrl键选择两行。怎么做？运行fiddle时也会出现错误，$未定义您可以使用我的示例选择2行或更多行，按住ctrl键并单击，或按住shift键并单击以选择多行，这只是解决方案中的一个小错误。当我使用ctrl键选择2个项目，然后删除其中一个项目时。然后使用shift键选择更多行，然后选择3个项目。使用shift键时，应仅选择最上面和最下面的行。

$(".clickableRow").live("click", function () {
  $(".clickableRow").css("backgroundColor", "transparent");
  $(this).css("backgroundColor", "red");
});

$(function(){
$(document).on('click', '#list li', function(e){
    e.preventDefault();

    var $this = $(this);

    // Detecting ctrl (windows) / meta (mac) key.
    if (e.ctrlKey || e.metaKey)
    {
        if ($this.hasClass('selected'))
        {
           $this.removeClass('selected');
        }
        else
        {
           $this.addClass('selected')
        }                        
    }
    // Detecting shift key
    else if (e.shiftKey)
    {
        // Get the first possible element that is selected.
        var currentSelectedIndex = $('#list li.selected').eq(0).index();

        // Get the shift+click element
        var selectedElementIndex = $('#list li').index($this);

        // Mark selected between them

        if (currentSelectedIndex < selectedElementIndex)
        {
            for (var indexOfRows = currentSelectedIndex; indexOfRows <= selectedElementIndex; indexOfRows++)
            {
                 $('#list li').eq(indexOfRows).addClass('selected');  
            }
        }
        else
        {
            for (var indexOfRows = selectedElementIndex; indexOfRows <= currentSelectedIndex; indexOfRows++)
            {
                 $('#list li').eq(indexOfRows).addClass('selected');  
            }
        }                        
    }        
    else
    {
           $('#list li').removeClass('selected');
           $this.addClass('selected');
    }        
});