javascript - Select multiple HTML table rows with Ctrl+click and Shift+click -
i want select multiple rows using windows shift , ctrl keys, multiple folder selection in windows.
from table of selected rows have first column (student id) , pass server side c#
, delete records database.
i have written code in javascript classname not being applied <tr>
on shift or ctrl+ left click.
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 seelcted while selecting patients // select patient clicked row plus // maintain 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; }
it's not of functionality want, since question bit vague, he's attempt @ adding ctrl or shift+ left mouse button select or deselect multiple table rows - see demo , code below. disclaimer: tested in chrome , code can optimised.
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 - b; }); (var = indexes[0]; <= indexes[1]; i++) { trs[i-1].classname = 'selected'; } } function clearall() { (var = 0; < 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 }
i @ addeventlistener vs onclick , move event handler binding out of html , javascript. known unobtrusive javascript.
resources might want read:
Comments
Post a Comment