Fatal编程技术网
  • javascript/
  • 如何使用javascript检查单元格是否着色并获取它们在表中的位置

如何使用javascript检查单元格是否着色并获取它们在表中的位置

javascript php html css

如何使用javascript检查单元格是否着色并获取它们在表中的位置,javascript,php,html,css,Javascript,Php,Html,Css,当前，我的表格单元格可以通过更改单元格的类别来更改颜色。我想在这里实现的是，当我点击book按钮时，如何检查整个表格，如果其中一个单元格是红色的，如何在表格上获得它们的坐标？我的表链接到数据库，但它实际上是一个4x23表。这是密码 HTML+Javascript <head> <link rel="stylesheet" type="text/css" href="booking.css"> </head> <style> </st

当前，我的表格单元格可以通过更改单元格的类别来更改颜色。我想在这里实现的是，当我点击book按钮时，如何检查整个表格，如果其中一个单元格是红色的，如何在表格上获得它们的坐标？我的表链接到数据库，但它实际上是一个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>


功能预订（）{
//获取所有t2细胞
var t2Cells=document.getElementsByClassName（“t2”）；
//准备坐标数组
变量坐标=[]；
//循环所有.t2元素
对于（var i=0；i0）{
警报（坐标.length+“已预订！”）；/“N已预订！”
//第一个：
警报（“首先在X:+坐标[0]。左+”Y:+坐标[0]。顶部）
//或在此处为循环'coordinates'数组，并使用索引

对于（var n=0；n内的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>



点击我
函数myFunction（）{
var t2Cells=document.getElementsByClassName（“t2”）；

对于（var i=0；iOkay我会的！很抱歉我是一个初学者。
属于
，而不是介于
和
之间。您更喜欢使用jQuery吗？它使用起来非常简单，使用起来有点复杂javascript@GauravRai如果Jquery能在这里工作，我不介意使用它！很抱歉让您困惑，我的意思是我想找出单元格在表格中的位置。例如，第2行第5列为红色。@Lchai请检查编辑的JS函数，该函数在Chrome中测试过，并且正在工作。是的，编辑的JS函数解决了这个问题！：）

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)
      }
  }
}



<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>