javascript - Highlight table cells with header -

i need solution

1. when select mouse on specific cell index (like a5) highlighted headers.
2. from cell(a5) if mouse drug on other cells highlighted(like a5 d5 cells) headers(like row headers 1,2,3... & column headers a,b,....).

have solution?

tried first:

        $('#mytable ').on( "click","td",function() {          $("td").removeclass("highlighted");         $(this).addclass("highlighted").siblings().removeclass('highlighted');         $("th").removeclass("highlighte");         $(this).parent().find("th").addclass("highlighte");         var t = $('#mytable th').eq($(this).index());         var ad= t.text();         $('th#'+ad).addclass("highlighte");          } ); 

css:

   .highlighted {      border: 2px solid #0080ff ;     }    .highlighte {      background-color: #808080 ;     } 

tried second:

         $(window).load(function() {          //alert('tanim');          var ismousedown = false;          $("#mytable td")              .mousedown(function () {                  ismousedown = true;                  $(this).addclass("severalcell-highlight");                 // return false; // prevent text selection              })              .mouseover(function () {                  if (ismousedown) {                      $(this).addclass("severalcell-highlight");                  }              })              .mouseup(function () {                  if (ismousedown) {                      $(this).addclass("severalcell-highlight");                  }              })              .bind("selectstart", function () {                  //return false; // prevent text selection in ie              });           $(document)              .mouseup(function () {                  ismousedown = false;               });          $('#mytable').on( "click","td",function() {               $("td").removeclass("severalcell-highlight");          } );      }); 

i have not yet solved header highlighting problem, rest works. put following $(document).ready function:

mdown=false; var funcfalse=function(){ console.log('selsta'); } var hover=function(ev){ if (mdown) $(this).toggleclass('hi_td'); } var mo=function(ev){  mdown=(ev.type=='mousedown');  if (mdown) $(this).toggleclass('hi_td');  console.log(mdown);}  var $tbl = $("#table-1"),$tblhead = $("#table-1 thead tr");  $("tbody td",$tbl).on({"mousedown":mo,"mouseup":mo,"mouseenter":hover                        "selectstart":funcfalse}); 

jsfiddle

of course, not lasso-selection, implying selection box. elements have visited (hovered over) mousedown selected or deselected (on return visit).

edit 2

got now! select box-shaped-area , title highlighted (or 'highlit' ?!?) !

the following should in $(document).ready function:

mdown=false; msel=[[],[]];   // msel=[[startrow,endrow],[startcol,endcolcol2]] var funcfalse=function(){console.log('selsta');} // disable ie text selection var getpos=function(o,i){var o=$(o); // position of current cell                    msel[0][i]=o.parent().index();   // set row     msel[1][i]=o.index();            // set column     return msel; } var modsel=function(o){              // utility function cell position of o     var r=getpos(o,1)[0].slice(0);r.sort();     var c=       msel[1].slice(0);c.sort();     $trs=$('#table-1 tbody tr');     $('td',$trs).removeclass('hi_td');     $trs.slice(r[0],r[1]+1).each(function(){         $('td',this).slice(c[0],c[1]+1).addclass('hi_td');})     $("#table-1 thead tr th").removeclass('hi_th')         .slice(c[0],c[1]+1).addclass('hi_th'); }              var hover=function(ev){ if (mdown) modsel(this); }       // event function hover var mo=function(ev){ mdown=(ev.type=='mousedown')?1:0;   // event function mouseuo/down     getpos(this,1-mdown);     if (mdown) modsel(this); } var $tbl = $("#table-1"),$tblhead = $("#table-1 thead tr"); $("tbody td",$tbl)     .on({"mousedown":mo,"mouseup":mo,"mouseenter":hover,"selectstart":funcfalse}); 

jsfiddle

edit 3: (row-headers)

a modification include leading <th>s in each row possible. modified old jsfiddle accordingly. not pleased solution yet, not recognise itself, whether leading <th> present or not in each line. changed offset manually from

    $trs.slice(r[0],r[1]+1).each(function(){     $('td',this).slice(c[0],c[1]+1).addclass('hi_td');});  

to

    $trs.slice(r[0],r[1]+1).each(function(){     $('td',this).slice(c[0]-1,c[1]).addclass('hi_td');}); 

maybe find better solution soon. however, here can find updated jsfiddle.

edit 4: (more 9 columns):

sorry, bit lazy when did first version. determine min , max values of row , column numbers sorting arrays r , c. unfortunately used alphabetic (default) sorting, assumes '9' higher '10'. changed jsfiddle in following lines (adding numeric sort-callback-function numsrt):

var numsrt=function(a,b){return a-b;} var r=getpos(o,1)[0].slice(0);r.sort(numsrt); var c=       msel[1].slice(0);c.sort(numsrt); 

now works large tables: jsfiddle