title: Span rows of a table with mousedown and drag in jquery?
body: <p>I'm trying to develop a schedule where I can click any "time" row and drag down to span that row as far as the row that I 'mouseup'. For example, if I click down at 7:30 am and drag down to 9:00, the table data element will rowspan the appropriate number of rows so that table data becomes one block from 7:30 to 9:00 in that column (ie. Monday). This is the function of the "Add Appointment" button. </p>
  
  <p>My plan was to store the index value for the tr when I click down, and then subtract that value from the index of the tr that I hover to (while mouse is down). For example, if I click down at row 1, drag to row 3 then mouse up, then the td that was first clicked should have its rowspan attribute set to 2.</p>
  
  <p>Currently my function will span a number of rows solely depending on how far down I hover. So it is clearly not subtracting the initial index from clicking down. I'm not sure why. Any tips?</p>
  
  <p><a href="https://jsfiddle.net/Adam_M/fypw7jka/" rel="nofollow noreferrer">https://jsfiddle.net/Adam_M/fypw7jka/</a></p>
  
  <p>Here is my HTML for the schedule and buttons: </p>
  
  <pre><code>   &lt;div class="row" id="control-panel"&gt;
      &lt;button onclick="addAppt()" id="add-appt" title="Add Appointment"&gt;+&lt;/button&gt;
      &lt;p&gt;= Add Appointment&lt;/p&gt;
      &lt;button onclick="delAppt()" id="del-appt" title="Delete Appointment"&gt;-&lt;/button&gt;
      &lt;p&gt;= Delete Appointment&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;table&gt;
        &lt;thead&gt;
          &lt;tr class="days-of-the-week"&gt;
            &lt;th scope="col" class="time-col"&gt;&lt;/th&gt;
            &lt;th scope="col"&gt;Sunday&lt;/th&gt;
            &lt;th scope="col"&gt;Monday&lt;/th&gt;
            &lt;th scope="col"&gt;Tuesday&lt;/th&gt;
            &lt;th scope="col"&gt;Wednesday&lt;/th&gt;
            &lt;th scope="col"&gt;Thursday&lt;/th&gt;
            &lt;th scope="col"&gt;Friday&lt;/th&gt;
            &lt;th scope="col"&gt;Saturday&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;th scope="row"&gt;7:30 AM&lt;/th&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;th scope="row"&gt;8:00 AM&lt;/th&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;th scope="row"&gt;8:30 AM&lt;/th&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;th scope="row"&gt;9:00 AM&lt;/th&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
            &lt;td rowspan=""&gt;&lt;textarea cols="20" rows="5" class="appt-text"&gt;&lt;/textarea&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="scheduler.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Javascript for the relevant function: </p>
  
  <pre><code>function addAppt() {
  $('td').css('cursor', 'cell');
  $('textarea').css('cursor', 'cell');
  $('td').mousedown(function(){
      var initIndex = $(this).parent().index(); 
      $('td').hover(function(){
          var spanCount = $(this).parent().index(); 
          var span = spanCount - initIndex;
          $(this).attr( 'rowspan', span);
          $(this).addClass('highlight');
        });
  });
  $('td').mouseup(function(){
    $('td').off('mouseenter mouseleave');
  });
  }
  </code></pre>