2016-07-28 31 views
0

我不知道我在做什麼錯誤,但一直未能在2天內得到期望的結果。獲取並顯示從表格單元格中選定的innerHTML數組(td)

我想顯示選定單元格的數組從表格到div。我可以顯示單個的innerHTML,但不能作爲一個數組。

\t $('td').click(function() { 
 
\t \t $(this).toggleClass('active-select-color'); 
 
\t \t if($('td').hasClass('active-select-color')) 
 
\t \t \t $('#mark-now').show(); 
 
\t \t else 
 
\t \t \t $('#mark-now').hide(); 
 
\t }); 
 
\t var selected = []; 
 
\t var tbl = document.getElementById("calender-table"); 
 
\t if (tbl != null) { 
 
\t for (var i = 0; i < tbl.rows.length; i++) { 
 
\t for (var j = 0; j < tbl.rows[i].cells.length; j++) 
 
\t tbl.rows[i].cells[j].onclick = function() { 
 
\t \t \t var item = getval(this); 
 
\t \t \t if($(this).hasClass('active-select-color')){ 
 
\t \t \t selected.push(item); 
 
\t \t } else { 
 
\t \t \t var index = selected.indexOf(item); 
 
\t \t \t selected.splice(index, 1); 
 
\t \t \t } 
 
\t console.log(selected); 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
\t function getval(cell) { 
 
     return cell.innerHTML; 
 
\t }
\t table{ 
 
\t \t border:3px solid #FD5196; 
 
\t \t margin-top:7px; 
 
\t \t width:50%; 
 
\t \t float:left; 
 
\t \t empty-cells:hide; 
 
\t } 
 
\t td{ 
 
\t \t color:#000; 
 
\t \t text-align:center; 
 
\t \t border:2px solid #E6C1EB; 
 
\t \t font-size:18px; 
 
\t \t font-weight:bold; 
 
\t \t width: 10%; 
 
\t \t height: 50px; 
 
\t \t background-color:#fff; 
 
\t } 
 
\t .active-select-color{ 
 
\t \t background-color:red; 
 
\t } 
 
\t 
 
\t td:empty{ 
 
\t \t text-align:center; 
 
\t \t border:2px solid #E6C1EB; 
 
\t \t font-size:18px; 
 
\t \t font-weight:bold; 
 
\t \t width: 10%; 
 
\t \t height: 50px; 
 
\t \t background-color:#fff !important; 
 
\t \t pointer-events: none; 
 
\t } 
 
\t td:hover{ 
 
\t \t color:#fff; 
 
\t \t text-align:center; 
 
\t \t border:2px solid #E6C1EB; 
 
\t \t font-size:18px; 
 
\t \t font-weight:bold; 
 
\t \t width: 10%; 
 
\t \t height: 50px; 
 
\t \t background-color:red; 
 
\t \t cursor:pointer; 
 
\t } 
 
\t th{ 
 
\t \t background: green; 
 
\t \t font-size: 20px; 
 
\t \t color: white; 
 
\t \t height: 50px; 
 
\t \t text-align: center; 
 
\t } 
 
\t .prevcell a, .nextcell a{ 
 
\t \t color:white; 
 
\t \t text-decoration:none; 
 
\t } 
 
\t 
 
\t tr.wk_nm{ 
 
\t \t background:#E6C1EB; 
 
\t \t color:#AB08BD; 
 
\t \t font-size:17px; 
 
\t \t font-weight:bold; 
 
\t \t width:10px; 
 
\t \t padding:5px; 
 
\t } 
 
\t 
 
\t .highlight{ 
 
\t \t background:#FD5196; 
 
\t \t color:white; 
 
\t \t padding:10px; 
 
\t } 
 
\t .disabled { 
 
\t \t pointer-events: none; 
 
\t } 
 
.div-inline { 
 
\t float:left; 
 
\t margin-top:7px; 
 
\t margin-left:2%; 
 
\t font-weignt:bold !important; 
 
\t padding:5px; 
 
\t width:40%; 
 
} 
 
.green-rect { 
 
\t height:25px; 
 
\t width:25px; 
 
\t background-color:#fff; 
 
\t border:1px solid #000; 
 
} 
 
.red-rect { 
 
\t height:25px; 
 
\t width:25px; 
 
\t background-color:red; 
 
} 
 
.mark-booked { 
 
\t margin-top:10px; 
 
\t padding:7px; 
 
\t color:#fff; 
 
\t background-color:blue; 
 
\t border-radius:5px; 
 
\t float:left; 
 
\t font-weight:bold; 
 
\t 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">&lt;&lt;</a></th> 
 
<th colspan="5">July&nbsp;2016</th> 
 
<th class="nextcell"><a href="http://localhost/admin/dashboard/manage-availability-calendar/2016/08">&gt;&gt;</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(); ?> 
 
<div id="demo"></div>

+0

你是什麼意思 「顯示爲陣」?像數組形式? '[0,1,2,3,4]'? – Adjit

+0

感謝@Adjit ...這基本上是爲了生產目的,所以我可以看到'div id =「demo」中顯示的值是什麼......「但我真正需要的是將」innerHTML「數組攜帶到我的表單它可以用作php數組..我可以從那裏處理它..只是新的JQuery –

回答

0

嘗試了這一點...

$('td').click(function() { 
 
\t \t $(this).toggleClass('active-select-color'); 
 
\t \t if($('td').hasClass('active-select-color')) 
 
\t \t \t $('#mark-now').show(); 
 
\t \t else 
 
\t \t \t $('#mark-now').hide(); 
 
\t }); 
 
    
 
\t var selected = []; 
 
\t var tbl = document.getElementById("calender-table"); 
 
\t if (tbl != null) { 
 
\t for (var i = 0; i < tbl.rows.length; i++) { 
 
\t for (var j = 0; j < tbl.rows[i].cells.length; j++) 
 
\t tbl.rows[i].cells[j].onclick = function() { 
 
\t \t \t var item = $(this).html(); 
 
\t \t \t if($(this).hasClass('active-select-color')){ 
 
\t \t \t selected.push(item); 
 
\t \t  } else { 
 
\t \t \t  var index = selected.indexOf(item); 
 
\t \t \t  selected.splice(index, 1); 
 
\t \t \t } 
 
\t   console.log(selected); 
 
       
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
\t
table{ 
 
\t \t border:3px solid #FD5196; 
 
\t \t margin-top:7px; 
 
\t \t width:50%; 
 
\t \t float:left; 
 
\t \t empty-cells:hide; 
 
\t } 
 
\t td{ 
 
\t \t color:#000; 
 
\t \t text-align:center; 
 
\t \t border:2px solid #E6C1EB; 
 
\t \t font-size:18px; 
 
\t \t font-weight:bold; 
 
\t \t width: 10%; 
 
\t \t height: 50px; 
 
\t \t background-color:#fff; 
 
\t } 
 
\t .active-select-color{ 
 
\t \t background-color:red; 
 
\t } 
 
\t 
 
\t td:empty{ 
 
\t \t text-align:center; 
 
\t \t border:2px solid #E6C1EB; 
 
\t \t font-size:18px; 
 
\t \t font-weight:bold; 
 
\t \t width: 10%; 
 
\t \t height: 50px; 
 
\t \t background-color:#fff !important; 
 
\t \t pointer-events: none; 
 
\t } 
 
\t td:hover{ 
 
\t \t color:#fff; 
 
\t \t text-align:center; 
 
\t \t border:2px solid #E6C1EB; 
 
\t \t font-size:18px; 
 
\t \t font-weight:bold; 
 
\t \t width: 10%; 
 
\t \t height: 50px; 
 
\t \t background-color:red; 
 
\t \t cursor:pointer; 
 
\t } 
 
\t th{ 
 
\t \t background: green; 
 
\t \t font-size: 20px; 
 
\t \t color: white; 
 
\t \t height: 50px; 
 
\t \t text-align: center; 
 
\t } 
 
\t .prevcell a, .nextcell a{ 
 
\t \t color:white; 
 
\t \t text-decoration:none; 
 
\t } 
 
\t 
 
\t tr.wk_nm{ 
 
\t \t background:#E6C1EB; 
 
\t \t color:#AB08BD; 
 
\t \t font-size:17px; 
 
\t \t font-weight:bold; 
 
\t \t width:10px; 
 
\t \t padding:5px; 
 
\t } 
 
\t 
 
\t .highlight{ 
 
\t \t background:#FD5196; 
 
\t \t color:white; 
 
\t \t padding:10px; 
 
\t } 
 
\t .disabled { 
 
\t \t pointer-events: none; 
 
\t } 
 
.div-inline { 
 
\t float:left; 
 
\t margin-top:7px; 
 
\t margin-left:2%; 
 
\t font-weignt:bold !important; 
 
\t padding:5px; 
 
\t width:40%; 
 
} 
 
.green-rect { 
 
\t height:25px; 
 
\t width:25px; 
 
\t background-color:#fff; 
 
\t border:1px solid #000; 
 
} 
 
.red-rect { 
 
\t height:25px; 
 
\t width:25px; 
 
\t background-color:red; 
 
} 
 
.mark-booked { 
 
\t margin-top:10px; 
 
\t padding:7px; 
 
\t color:#fff; 
 
\t background-color:blue; 
 
\t border-radius:5px; 
 
\t float:left; 
 
\t font-weight:bold; 
 
\t 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">&lt;&lt;</a></th> 
 
<th colspan="5">July&nbsp;2016</th> 
 
<th class="nextcell"><a href="http://localhost/admin/dashboard/manage-availability-calendar/2016/08">&gt;&gt;</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(); ?> 
 
<div id="demo"></div> 
 
Run code snippet

+0

非常感謝@SeeTheC ..但我真正的問題是,我怎麼能得到這些值的數組選擇作爲一個PHP數組,並在同一頁上的我的形式使用它?我可以處理PHP部分,但對JQuery來說是新的。 –

相關問題