2016-07-28 5 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 ... Thatsは基本的には生産目的のため、 '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を初めて使用します。 –

関連する問題