シフトキーとコントロールキーを使用して複数のテーブル行を選択しても動作しない

Question

こんにちは、私は、選択プロセスのためにいくつかのコードを使用するjava script.hereを使用して作成された編集可能なテーブルを持っています。 。私はコード [1]：http://jsfiddle.net/g8Rpe/ここから取得します。私のテーブル.but HTMLのテーブルのために示され、この例では、コードdaynamic 1 であるここにある：。

私は

$（ "TR"）を使用

 /******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>

「（上mousedown = RowClick（this、false） "）< マウスイベントを取得します。

しかし、

Answer 1

これはonの有効な構文ではありません。参照：http://api.jquery.com/on/

あなたはおそらくだった何を意味するのか：

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

Answer 2

間違った所業がいくつかあります。

1）あなたは

するvar TRS =のdocument.getElementById（ 'テーブル'）下の行のようにテーブルの行を取得しないであろうことなく、テーブルにIDを割り当てるtBodies [0] .getElementsByTagName（ 'TR'）。

など。 tableCreateメソッドでは、以下のコード行を追加します。 feelaによって提案されたような

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

2）第2のレジスタマウスダウンイベント、

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

は、それはあなたの問題を解決することを願っています。