Get Array von ausgewählten Daten aus dem Verfügbarkeitskalender

Question

Ich bin neu und lernen jquery von Grund auf neu.

Ich habe diesen Verfügbarkeitskalender, wo mehrere Daten ausgewählt werden können. Bis jetzt bin ich in der Lage, den Wert einzelner Zellen zu erhalten, aber nicht das Array von Werten der ausgewählten Gesamtzellen.

$('td').click(function() { 
 
\t $(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>

Ich brauche Hilfe, wie Array von Thesen mehreren ausgewählten Daten zu erhalten und als Array erhalten, so dass ich sie PHP/MySQL db einfügen.

Answer 1

Speichert den ausgewählten Wert in einem Array als selected.push(getval(this) Element entfernen, wenn die Klasse active nicht vorhanden ist;

$('td').click(function() { 
 
\t $(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>