用Ctrl選擇多個HTML錶行+單擊並按住Shift並單擊

Question

Demo

我要選擇使用Windows 移和按Ctrl鍵，就像在Windows多文件夾選擇多行。

從選定行的表中，我必須得到第一列（學生ID）並傳遞到服務器端C#並從數據庫中刪除這些記錄。

我已經寫在JavaScript但類名沒有被應用到<tr>上移或按Ctrl +左點擊代碼。

HTML

<table id="tableStudent" border="1"> 
    <thead> 
     <tr> 
      <th>ID</th> 
      <th>Name</th> 
      <th>Class</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr onmousedown="RowClick(this,false);"> 
      <td>1</td> 
      <td>John</td> 
      <td>4th</td> 
     </tr> 
     <tr onmousedown="RowClick(this,false);"> 
      <td>2</td> 
      <td>Jack</td> 
      <td>5th</td> 
     </tr> 
     <tr onmousedown="RowClick(this,false);"> 
      <td>3</td> 
      <td>Michel</td> 
      <td>6th</td> 
     </tr> 
     <tr onmousedown="RowClick(this,false);"> 
      <td>4</td> 
      <td>Mike</td> 
      <td>7th</td> 
     </tr> 
     <tr onmousedown="RowClick(this,false);"> 
      <td>5</td> 
      <td>Yke</td> 
      <td>8th</td> 
     </tr> 
     <tr onmousedown="RowClick(this,false);"> 
      <td>6</td> 
      <td>4ke</td> 
      <td>9th</td> 
     </tr> 
     <tr onmousedown="RowClick(this,false);"> 
      <td>7</td> 
      <td>7ke</td> 
      <td>10th</td> 
     </tr> 
    </tbody> 
</table> 

的JavaScript

var selectedrow; 
function RowClick(currenttr, lock) { 
var trs =tableStudent.tBodies[0].getElementsByTagName("tr"); 
var cnt; 
    if(window.event.button==2) 
    { 
     if(currenttr.className=='selected') 
     return false; 
    } 
alert(trs.length); 
if (((window.event.shiftKey) && (window.event.ctrlKey)) ||(window.event.shiftKey)) 
    { 
     for(var j=0; j<trs.length; j++) 
     { 
      if (trs[j].className!='normallock') 
      { 
       trs[j].className='normal'; 
      } 
     } 
     var mark=false; 

     if (typeof(selectedrow)=="undefined") 
     { 
      selectedrow=currenttr; 
      selectedrow.className='selected' 
      return false; 
     } 
     for(var j=0; j<trs.length; j++) 
     { 

      if ((trs[j].id ==selectedrow.id) || (trs[j].id ==currenttr.id)) 
      { 
       if (trs[j].className!='normallock') 
       { 
       trs[j].className='selected' 
       mark = !(mark); 
       } 
      } 
      else 
      { 
       if(mark==true) 
       { 
        if (trs[j].className!='normallock') 
        trs[j].className='selected' 
       } 
      } 
     } 
    } 
    else if(window.event.ctrlKey) 
    { 
     //if ctrl key is seelcted while selecting the patients 
     // select the patient with currently clicked row plus 
     // maintain the previous seelcted status 
     cnt=0; 
     for(var j=0; j<trs.length; j++) 
     { 
      if(trs[j].id == currenttr.id) 
      { 
       if(trs[j].className=='selected') 
       { 
        trs[j].className='normal'; 
       }else 
       { 
        trs[j].className='selected'; 
       } 
      } 
      if(trs[j].className=='selected') 
      { 
       cnt++; 
      } 
     } 

     if(cnt==0) 
     { 
      selectedrow=undefined; 
      return false; 
     } 
    } 
    else 
    { 
     for(var j=0; j<trs.length; j++) 
     { 
      if(trs[j].id == currenttr.id) 
      { 
       trs[j].className='selected' 
      } 
      else 
      { 
       if (trs[j].className!='normallock') 
       trs[j].className='normal'; 
      } 

     } 
    } 
    selectedrow=currenttr; 
} 

Answer 1

它可能不是所有你想要的功能，因爲這個問題是有點模糊，但他是一個企圖在加入按Ctrl或Shift + 鼠標左鍵選擇或取消選擇多個表格行 - see demo和下面的代碼。 免責聲明：僅在Chrome中進行測試，代碼幾乎可以肯定優化。

的JavaScript

var lastSelectedRow; 
var trs = document.getElementById('tableStudent').tBodies[0].getElementsByTagName('tr'); 

// disable text selection 
document.onselectstart = function() { 
    return false; 
} 

function RowClick(currenttr, lock) { 
    if (window.event.ctrlKey) { 
     toggleRow(currenttr); 
    } 

    if (window.event.button === 0) { 
     if (!window.event.ctrlKey && !window.event.shiftKey) { 
      clearAll(); 
      toggleRow(currenttr); 
     } 

     if (window.event.shiftKey) { 
      selectRowsBetweenIndexes([lastSelectedRow.rowIndex, currenttr.rowIndex]) 
     } 
    } 
} 

function toggleRow(row) { 
    row.className = row.className == 'selected' ? '' : 'selected'; 
    lastSelectedRow = row; 
} 

function selectRowsBetweenIndexes(indexes) { 
    indexes.sort(function(a, b) { 
     return a - b; 
    }); 

    for (var i = indexes[0]; i <= indexes[1]; i++) { 
     trs[i-1].className = 'selected'; 
    } 
} 

function clearAll() { 
    for (var i = 0; i < trs.length; i++) { 
     trs[i].className = ''; 
    } 
} 

HTML

<table id="tableStudent" border="1"> 
    <thead> 
     <tr> 
      <th>ID</th> 
      <th>Name</th> 
      <th>Class</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr onmousedown="RowClick(this,false);"> 
      <td>1</td> 
      <td>John</td> 
      <td>4th</td> 
     </tr> 
     <tr onmousedown="RowClick(this,false);"> 
      <td>2</td> 
      <td>Jack</td> 
      <td>5th</td> 
     </tr> 
     <tr onmousedown="RowClick(this,false);"> 
      <td>3</td> 
      <td>Michel</td> 
      <td>6th</td> 
     </tr> 
     <tr onmousedown="RowClick(this,false);"> 
      <td>4</td> 
      <td>Mike</td> 
      <td>7th</td> 
     </tr> 
     <tr onmousedown="RowClick(this,false);"> 
      <td>5</td> 
      <td>Yke</td> 
      <td>8th</td> 
     </tr> 
     <tr onmousedown="RowClick(this,false);"> 
      <td>6</td> 
      <td>4ke</td> 
      <td>9th</td> 
     </tr> 
     <tr onmousedown="RowClick(this,false);"> 
      <td>7</td> 
      <td>7ke</td> 
      <td>10th</td> 
     </tr> 
    </tbody> 
</table> 

CSS

.selected { 
    background: lightBlue 
} 

我也想看看addEventListener vs onclick並將事件處理函數綁定出HTML並將其移入JavaScript。這被稱爲Unobtrusive Javascript。

資源，你可能需要閱讀：

• Retrieve Table Row Index of Current Row
• disable text selection while pressing 'shift'
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Answer 2

我做了所有的Windows 7的資源管理器的行爲和jQuery鼠標事件的工作。

http://jsfiddle.net/ubershmekel/nUV23/6/

需要注意的是：

• 當您只要按一下，你爲下一個軸移單擊
• 使用Ctrl-Shift鍵可擴展當前的選擇，而不是轉動像移 - 單獨做。
• 使用Ctrl鍵並單擊添加一個支點，你可以使用Ctrl-Shift鍵然後展開圍繞新的支點該選擇。

的JS：

var selectionPivot; 
// 1 for left button, 2 for middle, and 3 for right. 
var LEFT_MOUSE_BUTTON = 1; 
var trs = document.getElementById('tableStudent').tBodies[0].getElementsByTagName('tr'); 
var idTds = $('td:first-child'); 
idTds.each(function(idx, val) { 
    // onselectstart because IE doesn't respect the css `user-select: none;` 
    val.onselectstart = function() { return false; }; 
    $(val).mousedown(function(event) { 
     if(event.which != LEFT_MOUSE_BUTTON) { 
      return; 
     } 
     var row = trs[idx]; 
     if (!event.ctrlKey && !event.shiftKey) { 
      clearAll(); 
      toggleRow(row); 
      selectionPivot = row; 
      return; 
     } 
     if (event.ctrlKey && event.shiftKey) { 
      selectRowsBetweenIndexes(selectionPivot.rowIndex, row.rowIndex); 
      return; 
     } 
     if (event.ctrlKey) { 
      toggleRow(row); 
      selectionPivot = row; 
     } 
     if (event.shiftKey) { 
      clearAll(); 
      selectRowsBetweenIndexes(selectionPivot.rowIndex, row.rowIndex); 
     } 
    }); 
}); 

function toggleRow(row) { 
    row.className = row.className == 'selected' ? '' : 'selected'; 
} 

function selectRowsBetweenIndexes(ia, ib) { 
    var bot = Math.min(ia, ib); 
    var top = Math.max(ia, ib); 

    for (var i = bot; i <= top; i++) { 
     trs[i-1].className = 'selected'; 
    } 
} 

function clearAll() { 
    for (var i = 0; i < trs.length; i++) { 
     trs[i].className = ''; 
    } 
} 

而CSS：

.selected { 
    background: #bdf; 
} 

td:first-child { 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -o-user-select: none; 
    user-select: none; 
} 

td,th { 
    padding: 3px; 
    border: 2px solid #aaa; 
} 

table { 
    border-collapse: collapse; 
} 

Answer 3

這裏有一個jQuery插件我最近寫的一個項目。想分享...

作品就像你已經習慣了，+ 它極快因爲它工作在無需數組來檢查的屬性，類別等，並添加/ removeClass只觸發了上所選擇的元素：

// Use like: 
 
// $("table").selekt(); 
 
// 
 
// Available options: 
 
$("table").selekt({ 
 
    children: "tr",   // Elements to target (default: "tbody tr") 
 
    className: "selected", // Desired CSS class (default: "selected") 
 
    onSelect: function(sel) { // Useful callback 
 
    $("span").text(sel.length + ' in ' + this.id); 
 
    } 
 
});

.selected { background: #0bf; } 
 
table {border: 1px solid #555;display: inline-block; vertical-align: top;}

<p>Seleceted: <span id="info">0</span></p> 
 

 
<table id="table_1"> 
 
    <tr><td>1 SELECT ME</td></tr> 
 
    <tr><td>2 SELECT ME</td></tr> 
 
    <tr><td>3 SELECT ME</td></tr> 
 
    <tr><td>4 SELECT ME</td></tr> 
 
    <tr><td>5 SELECT ME</td></tr> 
 
    <tr><td>6 SELECT ME</td></tr> 
 
</table> 
 

 
<table id="table_2"> 
 
    <tr><td>1 SELECT ME</td></tr> 
 
    <tr><td>2 SELECT ME</td></tr> 
 
    <tr><td>3 SELECT ME</td></tr> 
 
    <tr><td>4 SELECT ME</td></tr> 
 
</table> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 
;(function($) { 
 
    // selekt jQuery plugin // http://stackoverflow.com/a/35813513/383904 
 
    $.fn.selekt = function() { 
 

 
    var settings = $.extend({ 
 
     children: "tbody tr", 
 
     className: "selected", 
 
     onSelect: function() {} 
 
    }, arguments[0] || {}); 
 

 
    return this.each(function(_, that) { 
 
     var $ch = $(this).find(settings.children), 
 
     sel = [], 
 
     last; 
 

 
     $ch.on("mousedown", function(ev) { 
 
     var isCtrl = (ev.ctrlKey || ev.metaKey), 
 
      isShift = ev.shiftKey, 
 
      ti = $ch.index(this), 
 
      li = $ch.index(last), 
 
      ai = $.inArray(this, sel); 
 

 
     if (isShift || isCtrl) ev.preventDefault(); 
 

 
     $(sel).removeClass(settings.className); 
 

 
     if (isCtrl) { 
 
      if (ai > -1) sel.splice(ai, 1); 
 
      else sel.push(this); 
 
     } else if (isShift && sel.length > 0) { 
 
      if (ti > li) ti = [li, li = ti][0]; 
 
      sel = $ch.slice(ti, li + 1); 
 
     } else { 
 
      sel = ai < 0 || sel.length > 1 ? [this] : []; 
 
     } 
 

 
     last = this; 
 
     $(sel).addClass(settings.className); 
 
     settings.onSelect.call(that, sel); 
 
     }); 
 
    }); 
 
    }; 
 
}(jQuery)); 
 
</script>

Answer 4

檢查這個例子：

代碼

部分：

switch(e.type) { 
    case "keydown" : 
     console.log('k_down'); 
     keysPressed.push(e.keyCode); 
     break; 
    case "keyup" : 
     console.log('k_up'); 
     var idx = keysPressed.indexOf(e.keyCode); 
     if (idx >= 0) 
      keysPressed.splice(idx, 1); 
     break; 
} 

源可以在這裏找到： Source files github

Answer 5

我知道這個問題已經回答了，它是很老，但我發現andyb答案是超級有用。也許是因爲andyb的答案現在可能已經過時了，但是我最終不得不改變他的解決方案來處理我的項目，所以我想我會分享我的更新版本。這就是我最終的結果，使用jQuery的噴灑。

$(document).ready(function(){ 
    //put all the table rows in a variable after page load to pass in to RowClick 
    var trs = $('#tableStudent tr') 
    //bind the click handler to all the table rows 
    $('tr').on('click', function(){ 
     //call the RowClick function on click event 
     RowClick($(this),false,trs) 
    }) 
}) 

//declare variable to store the most recently clicked row 
var lastSelectedRow; 

// disable text selection 
document.onselectstart = function() { 
    return false; 
} 

function RowClick(currentrow, lock, rows) { 
    //if control is held down, toggle the row 
    if (window.event.ctrlKey) { 
     toggleRow(currentrow); 
    } 

    //if there are no buttons held down... 
    if (window.event.button === 0) { 

     //if neither control or shift are held down... 
     if (!window.event.ctrlKey && !window.event.shiftKey) { 
      //clear selection 
      clearAll(rows); 
      //toggle clicked row 
      toggleRow(currentrow); 
     } 

     //if shift is held down... 
     if (window.event.shiftKey) { 
      //pass the indexes of the last selected row and currently selected row along with all rows 
      selectRowsBetweenIndexes([lastSelectedRow.index(), currentrow.index()], rows) 
     } 
    } 
} 

function toggleRow(row) { 
    //if the row is not the header row... 
    if (!row.hasClass('header-row')){ 
     //if the row is selected... 
     if (row.hasClass('selected')){ 
      //deselect it 
      row.removeClass('selected') 
     } 
     else{ 
      //otherwise, select it 
      row.addClass('selected') 
     } 
     //reassign the most recently selected row 
     lastSelectedRow = row; 
    } 
} 

function selectRowsBetweenIndexes(indexes,rows) { 
    //sort the indexes in ascending order 
    indexes.sort(function(a, b) { 
     return a - b; 
    }); 

    //for every row starting at the first index, until the second index... 
    for (var i = indexes[0]; i <= indexes[1]; i++) { 
     //select the row 
     $(rows[i+1]).addClass('selected'); 
    } 
} 

function clearAll(rows) { 
    //for all rows... 
    for (var i = 0; i < rows.length; i++) { 
     //deselect each row 
     $(rows[i]).removeClass("selected"); 
    } 
} 

Answer 6

下面的代碼是從機器人ÇBuljan修改，因爲我想使用複選框複選和shift鍵

<includeScript value="/jquery-3.2.0.min.js" /> 
 
<script> 
 
\t ;(function($) { 
 
\t // selekt jQuery plugin // http://stackoverflow.com/a/35813513/383904 
 
\t $.fn.selekt = function() { 
 
\t var settings = $.extend({ 
 
\t  children: "td input[type='checkbox'][name='ids']", 
 
\t  onSelect: function(){ 
 
\t  } 
 
\t }, arguments[0] || {}); 
 
\t return this.each(function(_, that){ 
 
\t  var $ch = $(this).find(settings.children), 
 
\t  sel = [], 
 
\t  last; 
 
\t  $ch.on("mouseup", function(ev) { 
 
\t  \t /* Note 1: Remember this code is run when a checkbox is clicked and is run before checbox's state changes because of click 
 
\t  \t i.e. to say if the checkbox was checked and we clicked it to uncheck, then this event handler (mouse up)code is called before the unchecing happens */ 
 
\t  if(ev.shiftKey || ev.ctrlKey){ 
 
\t   ev.preventDefault(); 
 
\t   ev.stopPropagation(); 
 
\t  } 
 
\t  var self = this; 
 
\t  var ti = $ch.index(this), // index of current element in the matching elements 
 
\t   li = $ch.index(last), // index of last element in the matching elements 
 
\t   ai = $.inArray(this, sel); // index of this in the sel array 
 
\t  if(ev.ctrlKey) { 
 
\t   if(ai > -1) sel.splice(ai, 1); 
 
\t   else sel.push(this); 
 
\t  } 
 
\t  else if(ev.shiftKey && sel.length > 0) { 
 
\t   if(ti > li) ti = [li, li=ti][0]; 
 
\t   sel = $ch.slice(ti, li+1); 
 
\t  } 
 
\t  else { 
 
\t   sel = ai < 0 || sel.length > 1 ? [this] : []; 
 
\t  } 
 
\t  last = this; 
 
\t  /* purpose 2 
 
\t  code to check checkboxes inside the array*/ 
 
\t  $(sel).each(function(index, checkbox){ 
 
\t  \t /* see/search Note 1 in comments, if the checkbox is already checked/unchecked then uncheck/check all the elements straight from the last element correspondingly */ 
 
\t  \t if(self.checked) { 
 
\t  \t \t if(checkbox != self){ 
 
\t \t \t   checkbox.checked = false; 
 
\t  \t \t } 
 
\t  \t } else { \t 
 
\t \t  \t if(checkbox != self){ 
 
\t \t \t   checkbox.checked = true; 
 
\t \t  \t } 
 
\t  \t } 
 
\t  }) 
 
\t  /*end of purpose 2*/ 
 

 
\t  // settings.onSelect.call(that, sel); // this is defined just in case we want to call some function after the select/deselect operation 
 
\t  }); 
 
\t }); 
 
\t }; 
 
\t }(jQuery)); 
 
\t setTimeout(function(){ 
 
\t \t $("table.list").selekt(); 
 
\t },500) 
 
\t 
 
</script>