我最近开始使用CI,我对JQuery很新。仍在努力抓住它。
我可以在日历中选择多个日期并取消选择它们。同时提交按钮显示并隐藏日期选择。
我有这些日期的数组,我不知道如何转换为PHP(或让它形成提交)。我不知道从哪里开始?
$('td').click(function() {
$(this).toggleClass('active-select-color');
if($('td').hasClass('active-select-color'))
$('#mark-now').show();
else
$('#mark-now').hide();
});
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-select-color')){
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); -->
}
&#13;
table{
border:3px solid #FD5196;
margin-top:7px;
width:50%;
float:left;
empty-cells:hide;
}
td{
color:#000;
text-align:center;
border:2px solid #E6C1EB;
font-size:18px;
font-weight:bold;
width: 10%;
height: 50px;
background-color:#fff;
}
.active-select-color{
background-color:red;
}
td:empty{
text-align:center;
border:2px solid #E6C1EB;
font-size:18px;
font-weight:bold;
width: 10%;
height: 50px;
background-color:#fff !important;
pointer-events: none;
}
td:hover{
color:#fff;
text-align:center;
border:2px solid #E6C1EB;
font-size:18px;
font-weight:bold;
width: 10%;
height: 50px;
background-color:red;
cursor:pointer;
}
th{
background: green;
font-size: 20px;
color: white;
height: 50px;
text-align: center;
}
.prevcell a, .nextcell a{
color:white;
text-decoration:none;
}
tr.wk_nm{
background:#E6C1EB;
color:#AB08BD;
font-size:17px;
font-weight:bold;
width:10px;
padding:5px;
}
.highlight{
background:#FD5196;
color:white;
padding:10px;
}
.disabled {
pointer-events: none;
}
.div-inline {
float:left;
margin-top:7px;
margin-left:2%;
font-weignt:bold !important;
padding:5px;
width:40%;
}
.green-rect {
height:25px;
width:25px;
background-color:#fff;
border:1px solid #000;
}
.red-rect {
height:25px;
width:25px;
background-color:red;
}
.mark-booked {
margin-top:10px;
padding:7px;
color:#fff;
background-color:blue;
border-radius:5px;
float:left;
font-weight:bold;
font-size:125%;
}
.submit-dates {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 15px 2px 4px 2px;
cursor: pointer;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellpadding="1" cellspacing="2" id="calender-table">
<tr>
<th class="prevcell"><a href="http://localhost/admin/dashboard/manage-availability-calendar/2016/06"><<</a></th>
<th colspan="5">July 2016</th>
<th class="nextcell"><a href="http://localhost/admin/dashboard/manage-availability-calendar/2016/08">>></a></th>
</tr>
<tr class="wk_nm disabled">
<td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td><td>Sun</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
</tr>
<tr>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td>
</tr>
<tr>
<td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td>
</tr>
<tr>
<td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td>
</tr>
</table>
<?= form_open('dashboard/insert-calender-dates'); ?>
<input id="mark-now" style="display:none;" type="submit" class="submit-dates" value="Mark as booked">
<?= form_close(); ?>
&#13;