Sélectionnez plusieurs lignes de tableau HTML avec Ctrl + clic et Maj + clic
Je souhaite sélectionner plusieurs lignes à l'aide de Windows Shift et Ctrl , comme la sélection de plusieurs dossiers dans Windows.
Dans le tableau des lignes sélectionnées, je dois obtenir la première colonne (identifiant étudiant) et passer du côté serveur C# et supprimez ces enregistrements de la base de données.
J'ai écrit un code en javascript mais le classname n'est pas appliqué à <tr> sur Shift ou Ctrl+ clic gauche.
[~ # ~] 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;
}
Ce n'est probablement pas toutes les fonctionnalités que vous souhaitez, car la question est un peu vague, mais il essaie d'ajouter Ctrl ou Shift+ bouton gauche de la souris pour sélectionner ou désélectionner plusieurs lignes du tableau - voir la démo et le code au dessous de. Disclaimer: Uniquement testé en Chrome et le code peut presque certainement être optimisé.
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
}
Je voudrais également regarder addEventListener vs onclick et déplacer la liaison du gestionnaire d'événements hors du [~ # ~] html [~ # ~] et en JavaScript . Ceci est connu sous le nom de Javascript discret .
Ressources que vous voudrez peut-être lire:
Voici un plugin jQuery J'ai écrit récemment pour un projet. Partage de pensée ...
Fonctionne exactement comme vous en avez l'habitude, + c'est extrêmement rapide car il fonctionne sur un tableau sans avoir besoin de vérifier les attributs, les classes, etc., et les déclencheurs add/removeClass uniquement sur les éléments sélectionnés:
// 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>Je l'ai fait fonctionner avec tous les comportements de l'Explorateur Windows 7 et les événements de souris jquery.
http://jsfiddle.net/ubershmekel/nUV23/6/
Notez que:
- Lorsque vous cliquez simplement, vous définissez un pivot pour le prochain clic Maj
- Utilisez Ctrl-Maj pour développer votre sélection actuelle et ne pas pivoter comme le fait Maj seul.
- Utilisez Ctrl-clic pour ajouter un pivot, vous pouvez utiliser Ctrl-Maj pour ensuite étendre cette sélection autour du nouveau pivot.
Les 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 = '';
}
}
Et le 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;
}
Le code suivant est une modification de Robo C Buljan, car je voulais effectuer une multisélection en utilisant des cases à cocher et une touche Maj
<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>Vérifiez cet exemple:
JSFiddle: surligner la liste avec shift et ctrl
Une partie du code:
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;
}
Les sources peuvent être trouvées ici: Fichiers source github
Je sais que cette question a déjà reçu une réponse et elle est assez ancienne, mais j'ai trouvé la réponse d'Andyb très utile. C'est peut-être parce que la réponse d'Andyb est peut-être dépassée maintenant, mais j'ai fini par devoir changer un peu sa solution pour travailler avec mon projet, alors j'ai pensé que je partagerais ma version mise à jour. Voici ce que j'ai fini par utiliser, une pincée de 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");
}
}