使用Shift鍵和控制鍵選擇多個錶行不工作

Question

您好我有一個可編輯的表，它是通過使用Java腳本創建的。在這裏我使用一些代碼進行選擇過程。我想要使用控制鍵和Shift鍵選擇錶行。我從 [1]：http://jsfiddle.net/g8Rpe/這裏得到的代碼。顯示了HTML表。但我的表這個例子是一個daynamic的 代碼是在這裏：

 /******for table**************/ 
 
     $(function() { 
 
      function tableCreate() { 
 
       var body = document.body, 
 
       tbl = document.createElement('table'); 
 

 

 
       tbl.style.width = '100%'; 
 

 
       tbl.style.borderCollapse = 'collapse'; 
 

 
       for (var i = 0; i < 30; i++) { 
 
        var tr = tbl.insertRow(); 
 
        tr.setAttribute("data-id", i, 0); 
 
        for (var j = 0; j < 3; j++) { 
 

 
         var td = tr.insertCell(); 
 
         td.appendChild(document.createTextNode('')); 
 

 

 
        } 
 

 
       } 
 

 
       $("body").append(tbl); 
 
       $("td").addClass("mainheading4") 
 

 
       $("tr").on("onmousedown=RowClick(this,false)") 
 
      } 
 
      tableCreate(); 
 
      //******************for editable table*************************// 
 

 
      $('td').click(function() { 
 
       $('td').attr('contenteditable', 'true'); 
 
      }) 
 

 

 
      //************for multiple selection*****************// 
 
      var lastSelectedRow; 
 
      var trs = document.getElementById('table').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 = ''; 
 
       } 
 
      } 
 

 
     });

body{font-size:62.5%;} 
 
td { padding: 0.2em 0.4em; } 
 
.selected { background: lightBlue } 
 
    .mainheading4{ 
 
    border: 1px solid; 
 
    border-color: lightgray; 
 
    width:33.3%; 
 
    height:17px; 
 
    font-size:15px; 
 
    padding-left: -5px; 
 
    
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我使用

$（ 「TR」）上（」。 mousedown = RowClick（this，false）「）< 獲取鼠標事件。

但它沒有采取。

Answer 1

這不是on的有效語法。請參閱：http://api.jquery.com/on/

什麼你大概的意思是：

$("tr").on("mousedown", function(event) { 
    RowClick(event.target, false); 
}); 

Answer 2

有情侶的種種劣跡。

1）分配id來表沒有這些你不會得到表中的行，如下面線

變種TRS =的document.getElementById（ '表'）tBodies [0] .getElementsByTagName（ 'TR'）。

E.g.在你的tableCreate方法中添加下面的代碼行。

 var body = document.body, 
     tbl = document.createElement('table'), 
     tableId = document.createAttribute('id'); 
     tableId.value = "table"; 
     tbl.setAttributeNode(tableId); 

2）第二個寄存器鼠標按下事件一樣通過feela建議，

$(document).on('click', 'tr', function() { 
     RowClick(this, false); 
    }); 

希望它能夠解決您的問題。