从可用性日历中获取所选日期的数组

Question

我有这个可用性日历，可以选择多个日期。到目前为止，我能够获得单个细胞的价值，但不能获得所选总细胞数值的数组。

$('td').click(function() {
	$(this).toggleClass('active');
});
var tbl = document.getElementById("calender-table");
 if (tbl != null) {
 for (var i = 0; i < tbl.rows.length; i++) {
 for (var j = 0; j < tbl.rows[i].cells.length; j++)
 tbl.rows[i].cells[j].onclick = function () { getval(this); };
            }
        }
 function getval(cel) {
  alert(cel.innerHTML);
 }

td {
    width: 50px;
    height: 50px;   
    background-color: blue;
    color:white;
    border: 1px solid black;
}

.active {
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table align="center" id="calender-table" border="1" style="cursor: pointer;">
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
</table>

我需要一些帮助来了解如何获取多个选定日期的数组，并作为数组获取，以便我可以使用PHP / MySql将它们插入到数据库中。

Answer 1

将所选值保存在数组中selected.push(getval(this)如果不存在类激活，则删除元素;

$('td').click(function() {
	$(this).toggleClass('active');
});
var selected = [];
var tbl = document.getElementById("calender-table");
 if (tbl != null) {
 for (var i = 0; i < tbl.rows.length; i++) {
 for (var j = 0; j < tbl.rows[i].cells.length; j++)
 tbl.rows[i].cells[j].onclick = function () {
   var item = getval(this);
   if($(this).hasClass('active')){ 
   selected.push(item);
           } else {
             var index = selected.indexOf(item);
             selected.splice(index, 1);
           }                                 console.log(selected);}
   
  
   
            }
        }
 function getval(cel) {
  return cel.innerHTML;
  alert(cel.innerHTML);
 }

td {
    width: 50px;
    height: 50px;   
    background-color: blue;
    color:white;
    border: 1px solid black;
}

.active {
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table align="center" id="calender-table" border="1" style="cursor: pointer;">
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
<tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
</table>