Select Cells On A Table By Dragging

http://stackoverflow.com/questions/2013902/select-cells-on-a-table-by-dragging

HTML

<table cellpadding="0" cellspacing="0" id="our_table">
  <tr>
    <td>aasdfasdfasf</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
    <td>f</td>
    <td>g</td>
    <td>h</td>
    <td>i</td>
  </tr>
</table>

<br>
<h1 id="count"></h1>

CSS

table td {
  width:25px;
  height:10px;
  text-align:left;
  vertical-align:middle;
  background-color:#eef;
  border:0px solid #fff;
  padding: 2px;
}

table td.highlighted {
  background-color:#aab;
}

JavaScript

$(function () {
  var isMouseDown = false;
  var firstClickHasClass;
  var arr = {};
  $("#our_table td")
  .mousedown(function () {
   isMouseDown = true;
   var tis = $(this);
   if ( tis.hasClass("highlighted") ) {
   		firstClickHasClass = true;
   		tis.removeClass("highlighted");
      delete arr[tis.text()];
   } else {
     firstClickHasClass = false;
   		tis.addClass("highlighted");
      arr[tis.text()] = 1;
   }
   var arrstring = JSON.stringify(arr);
  console.log(arrstring)
  $("#count").text(arrstring);
      return false; // prevent text selection
    })
    
    
    
  .mouseover(function () {
     var tis = $(this);
    if (isMouseDown) {
    if (firstClickHasClass) {
    	$(this).removeClass("highlighted");
      delete arr[tis.text()];

    } else {
    	$(this).addClass("highlighted");
      arr[tis.text()] = 1;

    }
      var arrstring = JSON.stringify(arr);
      $("#count").text(arrstring);
    }
  });
  
  $(document)
  .mouseup(function () {
    isMouseDown = false;
    var arrstring = JSON.stringify(arr);
    $("#count").text(arrstring);

  });
});