我如何檢查單元格是否有顏色並使用JavaScript在表格中獲取其位置
[英]How do i check if cell is colored and get their postion in the table with javascript
問題描述
目前，我的表格的單元格能夠通過更改單元格的類來更改單擊時的顏色。 我要在這里實現的是，當我單擊“書本”按鈕時，如何檢查整個表格，如果其中一個單元格是紅色的並在表格上獲取其坐標？ 我的表鏈接到數據庫，但實際上是4x23的表。 繼承人代碼
HTML + Javascript
<head>
<link rel="stylesheet" type="text/css" href="booking.css">
</head>
<style>
</style>
<body>
<table id="tblMain">
<tr>
<th></th>
<th >Studio 1</th><th >Studio 2</th>
</tr>
<tr>
<td>1</td>
<td class='t' onclick='cSwap(this)'>booked</td>
<td class='t' onclick='cSwap(this)'>booked</td>
</tr>
<tr>
<td>2</td>
<td class='t' onclick='cSwap(this)'>booked</td>
<td class='t' onclick='cSwap(this)'>booked</td>
</tr>
<tr><td>3</td><td class='t' onclick='cSwap(this)'>booked</td><td class='t' onclick='cSwap(this)'>booked</td></tr><tr><td>4</td><td class='t' onclick='cSwap(this)'>booked</td><td class='t' onclick='cSwap(this)'>booked</td></tr><tr><td>5</td><td class='t' onclick='cSwap(this)'>booked</td><td class='t' onclick='cSwap(this)'>booked</td></tr><tr><td>6</td><td class='t' onclick='cSwap(this)'>booked</td><td class='t' onclick='cSwap(this)'>booked</td></tr><tr><td>7</td><td class='t' onclick='cSwap(this)'>booked</td><td class='t' onclick='cSwap(this)'>booked</td></tr><tr><td>8</td><td class='t' onclick='cSwap(this)'>booked</td><td class='t' onclick='cSwap(this)'>booked</td></tr><tr><td>9</td><td class='t' onclick='cSwap(this)'>booked</td><td class='t' onclick='cSwap(this)'>booked</td></tr><tr><td>10</td><td class='t' onclick='cSwap(this)'>booked</td><td class='t' onclick='cSwap(this)'>booked</td></tr><tr><td>11</td><td class='t' onclick='cSwap(this)'>booked</td><td class='t' onclick='cSwap(this)'>booked</td></tr><tr><td>12</td><td class='t' onclick='cSwap(this)'>booked</td><td class='t' onclick='cSwap(this)'>booked</td></tr><tr><td>13</td><td class='t' onclick='cSwap(this)'>booked</td><td class='t' onclick='cSwap(this)'>booked</td></tr><tr><td>14</td><td class='t' onclick='cSwap(this)'>booked</td><td class='t' onclick='cSwap(this)'>booked</td></tr><tr><td>15</td><td class='t' onclick='cSwap(this)'>booked</td><td class='t' onclick='cSwap(this)'>booked</td></tr><tr><td>16</td><td class='t' onclick='cSwap(this)'>booked</td><td class='t' onclick='cSwap(this)'>booked</td></tr><tr><td>17</td><td class='t' onclick='cSwap(this)'>booked</td><td class='t' onclick='cSwap(this)'>booked</td></tr><tr><td>18</td><td class='t' onclick='cSwap(this)'>booked</td><td class='t' onclick='cSwap(this)'>booked</td></tr><tr><td>19</td><td class='t' onclick='cSwap(this)'>booked</td><td class='t' onclick='cSwap(this)'>booked</td></tr><tr><td>20</td><td class='t' onclick='cSwap(this)'>booked</td><td class='t' onclick='cSwap(this)'>booked</td></tr><tr><td>21</td><td class='t' onclick='cSwap(this)'>booked</td><td class='t' onclick='cSwap(this)'>booked</td></tr><tr><td>22</td><td class='t' onclick='cSwap(this)'>booked</td><td class='t' onclick='cSwap(this)'>booked</td></tr><tr><td>23</td><td class='t' onclick='cSwap(this)'>booked</td><td class='t' onclick='cSwap(this)'>booked</td></tr>
</table>
<button onclick="Bookings()">Book</button>
<script>
function cSwap(cell){
if (cell.className == "t")
cell.className = "t2";
else if (cell.className == "t2")
cell.className = "t";
}
function Bookings(){
var booked = document.getElementsByClassName("t2");
if (book != null){
alert ("HI")
}else{
alert("HIIII")
}
}
</script>
CSS
table {
color: #333;
font-family: Helvetica, Arial, sans-serif;
/* Table reset stuff */
border-collapse: collapse; border-spacing: 0;
}
td, th { border: 20 none; height: 30px; }
th {
/* Gradient Background */
background: linear-gradient(#333 0%,#444 100%);
color: #FFF; font-weight: bold;
height: 40px;
padding: 0 30 0 30;
}
td { text-align: center; border: 7px solid white; padding: 0px;}
.t { background: #fff }
.t2 { background: #f00 }
/* First-child blank cells! */
tr td:first-child, tr th:first-child {
background: none;
font-style: italic;
font-weight: bold;
font-size: 14px;
text-align: right;
padding-right: 10px;
width: 80px;
}
/* Add border-radius to specific cells! */
tr:first-child th:nth-child(2) {
border-radius: 5px 0 0 0;
}
tr:first-child th:last-child {
border-radius: 0 5px 0 0;
}
2 個解決方案
解決方案1
0 2015-11-04 09:37:37
http://jsbin.com/lakami/2/edit?html,css,js,console,output
function Bookings(){
// Get all .t2 cells
var t2Cells = document.getElementsByClassName("t2");
// Prepare coordinates Array
var coordinates = [];
// Loop all .t2 elements
for(var i=0; i<t2Cells.length; i++){
// Push gBCR Object into our Array
coordinates.push( t2Cells[i].getBoundingClientRect() );
}
// Done
console.log( coordinates ); // Open console to see the sizes and positions of .t2 cells
// Use Examples:
var alreadyBookedTot /* are red; total */ = coordinates.length;
if( alreadyBookedTot>0 ){
alert(coordinates.length +" are booked!"); // "N are booked!"
// The first one:
alert("First at X:"+ coordinates[0].left +" Y:"+ coordinates[0].top)
// Or for loop `coordinates` Array here, and use indexes
for(var n=0; n<alreadyBookedTot; n++){
alert(coordinates[n].left+' '+coordinates[n].top)
}
}
}
解決方案2
0 已采納 2015-11-04 11:29:45
在按鈕的onclick內部，您可以嘗試此操作。
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
var t2Cells = document.getElementsByClassName("t2");
for(var i=0; i<t2Cells.length; i++){
getStyle = t2Cells.item(i).currentStyle ? t2Cells.item(i).currentStyle : getComputedStyle(t2Cells.item(i));
backgroundColor = getStyle.backgroundColor;
if(backgroundColor == "rgb(255, 0, 0)"){
console.log("true");
alert('Coordinates are: '+t2Cells.item(i).cellIndex+'x'+t2Cells.item(i).parentNode.rowIndex);
}
}
}
</script>
對不起，以前的版本，現在測試！
使用javascript，當我點擊它時，如何獲得表格單元格的背景顏色？
[英]Using javascript, how do I get the background color of a table cell when I click on it?
如何在此JavaScript生成的表中使表格單元格可單擊？
[英]How do I make a table cell clickable in this JavaScript generated table?
如何檢查單元格是否在 Javascript 循環中具有 select 元素？
[英]How do I check if a cell has a select element in a Javascript loop?
如何為Javascript中人口最多的地區制作彩色邊框？
[英]How do I make a colored border to the highest number of population in Javascript?
如何確定使用javascript單擊表上的哪個單元格？
[英]How do I identify which cell was clicked on a table using javascript?
如何使用 javascript 更改 HTML 表格單元格的背景顏色？
[英]How do I change the background color of an HTML table cell with javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.