web-dev-qa-db-ja.com

Ctrl +クリックおよびShift +クリックで複数のHTMLテーブル行を選択します

Demo

Windowsを使用して複数の行を選択したい Shift そして Ctrl Windowsでの複数フォルダー選択のようなキー。

選択した行のテーブルから最初の列（学生ID）を取得し、サーバー側C#に渡して、それらのレコードをデータベースから削除する必要があります。

JavaScriptでコードを記述しましたが、classnameが<tr>に適用されていません Shift または 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;
}
javascripthtmlweb-applicationsweb
16
John

質問は少しあいまいなので、必要な機能のすべてではないかもしれませんが、彼は追加しようとしています Ctrl または Shift+マウスの左ボタンで複数のテーブル行を選択または選択解除- デモを見る =と以下のコード。 免責事項：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 [〜＃〜]およびintoJavaScript。これは 控えめなJavascript として知られています。

読みたいリソース：

35
andyb

これがjQuery pluginです。最近プロジェクトのために書きました。考えを共有しています...

慣れているとおりに機能します+ + 非常に高速は、属性やクラスなどをチェックする必要なしに配列で動作し、選択した要素でのみadd/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>
8
Roko C. Buljan

Windows 7エクスプローラーのすべての動作とjqueryマウスイベントで動作するようにしました。

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

ご了承ください：

  • クリックするだけで、次のシフトクリックのピボットを設定します
  • Ctrl-Shiftを使用して現在の選択を拡張し、Shift-aloneのようにピボットしないでください。
  • 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;
}
6
ubershmekel

チェックボックスとシフトキーを使用して複数選択したかったので、次のコードはRobo C Buljanからの変更です。

<includeScript value="/jquery-3.2.0.min.js" />
<script>
        ;(function($) {
        // selekt jQuery plugin // http://stackoverflow.com/a/35813513/383904
        $.fn.selekt = function() {
          var settings = $.extend({
              children: "td input[type='checkbox'][name='ids']",
              onSelect: function(){
              }
          }, arguments[0] || {});
          return this.each(function(_, that){
            var $ch = $(this).find(settings.children),
            sel = [],
            last;
            $ch.on("mouseup", function(ev) {
                /* Note 1: Remember this code is run when a checkbox is clicked and is run before checbox's state changes because of click 
                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 */
              if(ev.shiftKey || ev.ctrlKey){
                ev.preventDefault();
                ev.stopPropagation();
              }
              var self = this;
              var ti = $ch.index(this), // index of current element in the matching elements
                  li = $ch.index(last), // index of last element in the matching elements
                  ai = $.inArray(this, sel); // index of this in the sel array
              if(ev.ctrlKey) {
                if(ai > -1) sel.splice(ai, 1);
                else sel.Push(this);
              }
              else if(ev.shiftKey && 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;
              /* purpose 2 
              code to check checkboxes inside the array*/
              $(sel).each(function(index, checkbox){
                /* 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 */
                if(self.checked) { 
                        if( checkbox != self){
                                checkbox.checked = false;
                        }
                } else {        
                        if( checkbox != self){
                                checkbox.checked = true;
                        }
                }
              })
              /*end of purpose 2*/

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

この例を確認してください：

JSFiddle：ShiftとCtrlを使用してリストを強調表示

コードの一部：

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

0
Sergey NN

私はこの質問がすでに回答されていて、かなり古いことを知っていますが、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");
    }
}
0
CosmicBuffalo