continuous integration - Insert jquery array to db in CI -
i started working ci , new jquery. still trying hold of it.
i able select multiple dates in calendar dis-select them. submit button showing , hiding on date choose.
i have array of these dates not sure how converted php (or form submit). don't know start from?
$('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 = 0; < 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); --> }
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; }
<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 booked"> <?= form_close(); ?>
Comments
Post a Comment