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"><<</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(); ?>
<div id="demo"></div>
何を "配列として表示" を意味するのですか?配列形式のように? '[0、1、2、3、4]'? – Adjit
ありがとう@Adjit ... Thatsは基本的には生産目的のため、 'div id =" demo "'に表示されている値を見ることができますが、実際には "innerHTML"の配列を自分のフォームに持っていく必要がありますどこでそれはPHP配列として使用することができます..そして、私はそこから処理することができるだろう..ちょうどJQueryの新しさ –