availabiltyカレンダーから選択した日付の配列を取得

Question

私は初心者から新しいjqueryを学びます。

複数の日付を選択できるこの利用可能な予定表があります。今まで私は個々のセルの価値を得ることができましたが、選択された総セルの価値の配列を得ることはできませんでした。

$('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>

私は、論文、複数の選択された日付の配列を取得し、私はPHP/MySQLを使用してDBにそれらを挿入することができるように配列として取得する方法についていくつかの援助を必要としています。

Answer 1

配列に選択した値をselected.push(getval(this)として保存します。class activeが存在しない場合は要素を削除します。

$('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>