从表格单元格中获取并显示所选innerHTML的数组（td）

时间：2016-07-28 19:23:43

标签： jquery

我不知道自己做错了什么，却未能在2天内获得理想的结果。

我想将一个选定单元格数组从表格显示为div。我可以显示单个innerHTML，但不能显示为数组。

＆＃13;
＆＃13; 
	$('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(cell) {
        return cell.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">&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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

试试这个......

＆＃13;
＆＃13; 
$('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 = $(this).html();
			if($(this).hasClass('active-select-color')){ 
			   selected.push(item);
		    } else {
			    var index = selected.indexOf(item);
			    selected.splice(index, 1);
			}
	        console.log(selected);
               
			}
		}
	}
＆＃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">&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
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题