javascript - Select multiple HTML table rows with Ctrl+click and Shift+click -


demo

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

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

c++ - End of file on pipe magic during open -