jquery get id of cells selected with mouse-CodePudding

I'm new on jquery but I'm trying to select different table cells with mouse select and get their id or name. The script for selecting the cells is the following, now the problem is to get all the values (id or name) of the selected cells:

$(document).ready(function () {
  var isMouseDown = false;
  var isMouseUp = true;
  var lastTr = -1;
  
  $('body').mousedown(function() {
    isMouseDown = true;
    $('td').removeClass('highlight');
  })
  .mouseup(function() {
    isMouseDown = false;
  });

  $("table td").hover(function(){
    var ctr = $(this).closest('tr').index();
    lastTr = lastTr === -1 ? ctr : lastTr;
    
    if (isMouseDown)
      if (lastTr !== ctr)
        $('td').removeClass('highlight');
      else
        $(this).addClass("highlight");
    
    lastTr = $(this).closest('tr').index();
  });

  $("table td").click(function(){
    $(this).toggleClass('highlight');
  });
    
        
});

The table script could be something like this:

<table>
  <tr>
    <td id"1"></td>
    <td id"2"></td>
    <td id"3"></td>
    <td id"4"></td>
    <td id"5"></td>
    <td id"6"></td>
    <td id"7"></td>
    <td id"8"></td>
  </tr>
</table>

What I'm trying to do is to insert in the calendar (see image) a date picker for holidays. Currently I'm using a normal form with a start and an end date, but it would be nicer we a mouse select:

CodePudding user response：

I'm not sure if I understood you correctly, but the way to get the ID of the cell is fairly simple. $(this).attr('id') inside the event handler will get it for you.
Find a snippet below that demonstrates it. I also added a way to get the id's into variables and highlight the cells between clicked cells.

$(document).ready(function () {
  var startDate;
  var endDate;
  
  $("table td").click(function(){
    var clickedId = $(this).attr('id')
    if (clickedId === startDate) {
      startDate = 0;
      endDate = 0;
      $("#start").val("");
      $("#end").val("");
      $('td').removeClass('highlight');
    }
    else if ($("#start").val().length === 0 || $("#start").val() > clickedId) {
        $("#start").val(clickedId);
      startDate = clickedId;
    }
    
    else {
      $("#end").val(clickedId);
      endDate = clickedId;
      $('td').removeClass('highlight');
    }
    
    if (startDate > 0 && endDate > 0) {
      for (let i = startDate; i <= endDate; i  ) {
        $("#"   i).addClass('highlight');
      } 
    }
  });
});

td {
  border: 1px solid black;
  height: 2em;
}

.highlight {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td >mon</td>
    <td >tue</td>
    <td >wed</td>
    <td >thu</td>
    <td >fri</td>
    <td >sat</td>
    <td >sun</td>
  </tr>
  <tr>
    <td id="1"></td>
    <td id="2"></td>
    <td id="3"></td>
    <td id="4"></td>
    <td id="5"></td>
    <td id="6"></td>
    <td id="7"></td>
  </tr>
</table>
<label>Start date:</label>
<input id="start" /><br/>
<label>End date:</label>
<input id="end" /><br/>

CodePudding user response：

it was not exactly was I was trying to do but it was the information that I needed to do wath I wanted to do :)) Here the revievew code with the mouse select function (drag from first to last day): :))

Thank you.

$(document).ready(function () {
var isMouseDown = false;
var isMouseUp = true;
var lastTr = -1;
  
$('body').mousedown(function() {
isMouseDown = true;
$('td').removeClass('highlight');
})
.mouseup(function() {
 isMouseDown = false;
});

$("table td").hover(function(){
var ctr = $(this).closest('tr').index();
lastTr = lastTr === -1 ? ctr : lastTr;

if (isMouseDown)
  if (lastTr !== ctr)
    $('td').removeClass('highlight');
  else
    $(this).addClass("highlight");

lastTr = $(this).closest('tr').index();
});

$("table td").click(function(){
$(this).toggleClass('highlight');
});

$("table td").mousedown(function(){
    isMouseDown=true;
     $("#start").val($(this).attr('id'));
});

$("table td").mouseup(function(){
    isMouseUp=true;
     $("#end").val($(this).attr('id'));
});
    
});

td {
  border: 1px solid black;
  height: 2em;
}

.highlight {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td >mon</td>
    <td >tue</td>
    <td >wed</td>
    <td >thu</td>
    <td >fri</td>
    <td >sat</td>
    <td >sun</td>
  </tr>
  <tr>
    <td id="1"></td>
    <td id="2"></td>
    <td id="3"></td>
    <td id="4"></td>
    <td id="5"></td>
    <td id="6"></td>
    <td id="7"></td>
  </tr>
</table>
<label>Start date:</label>
<input id="start" /><br/>
<label>End date:</label>
<input id="end" /><br/>